I'm building myself a simple website to show off my services. Everything was working fine until I used an iOS app called Clone to make a minor change to my faq.html file. After pushing the changes to GitHub through Clone, the FAQ page broke.
The Problem:
The page isn't communicating with the CSS file and the nav links on this page redirect to a redundant and broken URL like this:
https://studiooriley.github.io/“https://studiooriley.github.io/contact”
The link in the faq.html file is simply https://studiooriley.github.io/contact, but now on the FAQ page, all of the nav links have this weird repeated section in "" marks. if I remove the "..." section and simply type in the correct URL, the Contact page (and all the others) loads with all the correct styling and all the nav links work on every other page.
I have tried:
- rolling back to a previous commit.
- deleting and creating a new (copy/pasted) faq.html file.
- relinking the html to style.css.
- triple-checking the href="..." value for all links in the faq.html file.
- creating a new GitHub branch and committing a new version.
- refreshing the cache for my site and the FAQ page.
- opening the site and the affected page on Safari, Chrome, and Firefox, as well as an incognito window in Chrome.
- opening the site and the affected page on Safari for iOS.
- restarting Visual Studio Code.
- recommitting test changes on GitHub and refreshing the page.
- researching URLs and CSS links on w3schools.com and elsewhere on the web (for three days).
According to this stack overflow page, quotes aren't even a valid URL character, so I don't understand why it's defaulting to this strange format all by itself, and only on this page.
Here's all the code for the FAQ page:
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
currentlyActiveAccordionItemHeader.classList.toggle("active");
currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
}
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if(accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
}
else {
accordionItemBody.style.maxHeight = 0;
}
});
});
// PORTFOLIO SCRIPTS
// Toggle grid padding
function myFunction() {
var x = document.getElementById("myGrid");
if (x.className === "w3-row") {
x.className = "w3-row-padding";
} else {
x.className = x.className.replace("w3-row-padding", "w3-row");
}
}
// Open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}/* HTML & BODY */
html {
position: relative;
min-height: 100%;
}
body {
background-color: white;
margin: 0 0 150px;
}
/* NAV BAR */
header {
width: 100vw;
margin: auto;
position: sticky;
top: 0;
left: 0;
}
.so-logotype {
margin: auto;
width: calc(96px + 8vw);
height: calc(69px + 4.5vw);
object-fit:scale-down;
min-width: 64px;
}
.nav-bar {
width: 100vw;
position: relative;
margin: auto;
top: 0;
background-color: white;
border-bottom: 3px solid #8fc39b;
font-family: "Playfair Display", Roboto, "Open Sans", Montserrat, Futura;
font-size: 16px;
font-weight: 100;
justify-content: center;
}
.nav-bar-item {
display: inline-block;
padding: 0 20px 0 20px;
vertical-align: middle;
}
.nav-bar-item:hover {
color: #cfffda;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 10px 15px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-item {
display: block;
padding: inherit;
}
.dropdown-item:hover {
color: #cfffda;
}
.menu-icon {
width: 10%;
margin: auto;
display: none;
}
/* MENU ICON AND ANIMATION */
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 25px;
height: 3px;
border-radius: 5px;
background-color: #8fc39b;
margin: 5px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
/* HOME PAGE */
/* LINKS */
a {
color: #8fc39b;
text-decoration: none;
font-family: Montserrat, Futura;
font-size: 20px;
font-weight: 100;
}
a:hover {
color: #cfffda;
}
/* COLUMNS */
.category-filter {
width: 200px;
height: 100px;
margin: auto;
text-align: center;
background-color: #606060;
}
/* HOME PAGE STYLES */
#home-greeting {
width: 60vw;
max-width: 400px;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 75px;
font-weight: 100;
color: #5a5a5a;
text-transform: uppercase;
text-align: center;
margin: 50px auto;
position: static;
}
h1 {
width: 50vw;
margin: 20px auto 10px auto;
max-width: 400px;
color: #5a5a5a;
font-size: 30px;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
text-align: center;
}
h2 {
width: 50vw;
margin: 20px auto 10px auto;
max-width: 400px;
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
text-align: center;
}
p {
width: 50vw;
max-width: 500px;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 20px;
font-weight: 300;
color: #606060;
text-transform: none;
text-align: center;
margin: 2em auto;
position: static;
}
ul {
width: 25vw;
max-width: 400px;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 20px;
font-weight: 300;
color: #606060;
text-transform: none;
text-align: left;
margin: 0.5px auto;
}
button {
display: block;
max-width: 300px;
margin: auto;
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 20px;
font-weight: 200;
padding: 10px 25px;
border: none;
border-radius: 50px;
color: white;
background-color: #8fc39b;
}
/* FOOTER */
footer {
background: #8fc39b;
position: absolute;
display: flex;
place-items: center;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
}
footer .copyright-notice {
width: 100%;
display: block;
color: white;
font-size: 12px;
font-weight: 400;
min-width: 240px;
}
/* CONTACT PAGE STYLES */
.contact-card {
display: block;
width: 50vw;
margin: auto;
}
.contact-photo {
display: block;
width: 50%;
margin: auto;
}
.profile-photo {
display: block;
width: 150px;
border: 10px solid #8fc39b;
border-radius: 15%;
margin: auto;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* FAQ PAGE STYLES */
.accordion {
width: 50%;
max-width: 800px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #5a5a5a;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}
.accordion-item-body-content {
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 16px;
}
.accordion-item-header {
font-family: "Helvetica Neue", Montserrat, Roboto, "Open Sans";
font-size: 16px;
font-weight: 200;
padding: 0.25rem 3rem 1rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\003d";
font-size: 3rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
transform: rotate(-180deg);
content: "\2212";
font-size: 3rem;
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, #8fc39b, transparent) 1;
}
.accordion-item-header.active + .accordion-item-body {
max-height: 500;
}
/* MEDIA RULES */
@media screen and (max-width: 800px) {
.site-page {
display: none;
position: fixed;
}
.menu-icon {
top: 30px;
display: inline-block;
position: static;
margin-left: 20vw;
}
#home-greeting {
font-size: 50px;
}
}
@media(max-width: 767px) {
html {
font-size: 14px;
}
}
/* PORTFOLIO TEST CSS */
/* PORTFOLIO TEST CSS */
/* PORTFOLIO TEST CSS */
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
border-radius: 15px;
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: #8fc39b;
padding: 10px;
text-align: left;
border-radius: 20px;
}
.blog-image {
width: 100%;
border-radius: 15px;
}
.blog-title {
width: 100%;
margin: auto;
text-align: left;
}
.blog-excerpt {
text-align: left;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“styles/style.css”>
<script src=“scripts/scripts.js” defer></script>
<link rel=“icon” src="images/Studio_ORiley_Logo _Transparent_BG.png">
<meta charset=“utf-8”>
<title>Studio O'Riley</title>
</head>
<body>
<header>
<div class=“nav-bar”>
<div class=“nav-bar-item”>
<a href=“https://studiooriley.github.io”>
<img class=“so-logotype” src="images/Studio_ORiley_Logotype_Transparent_BG.png">
</a>
</div>
<div class=“nav-bar-item site-page”>
<a href=“https://studiooriley.github.io/portfolio”>portfolio</a>
</div>
<div class=“nav-bar-item dropdown site-page”>
<a href=“https://studiooriley.github.io/services”>services</a>
<div class=“dropdown-content”>
<a class=“dropdown-item” href=“https://studiooriley.github.io/pricing”>pricing</a>
<a class=“dropdown-item” href=“https://studiooriley.github.io/web-development”>web development</a>
<a class=“dropdown-item” href=“https://studiooriley.github.io/video-production”>video production</a>
<a class=“dropdown-item” href=“https://studiooriley.github.io/graphic-design”>graphic design</a>
</div>
</div>
<div class=“nav-bar-item dropdown site-page”>
<a href=“https://studiooriley.square.site”>store</span>
<div class=“dropdown-content”>
<a class=“dropdown-item” href=“https://studiooriley.github.io/cart”>cart</a>
</div>
</div>
<div class=“nav-bar-item site-page”>
<a href=“https://studiooriley.github.io/blog”>blog</a>
</div>
<div class=“nav-bar-item dropdown site-page”>
<a href=“https://studiooriley.github.io/about”>about</span>
<div class=“dropdown-content”>
<a class=“dropdown-item” href=“https://studiooriley.github.io/faq”>faq</a>
<a class=“dropdown-item” href=“https://studiooriley.github.io/contact”>contact</a>
<a class=“dropdown-item” href=“https://studiooriley.github.io/policies”>policies</a>
</div>
</div>
<div class=“menu-icon nav-bar-item” onclick=myFunction(this)>
<div class=“bar1”></div>
<div class=“bar2”></div>
<div class=“bar3”></div>
</div>
</div>
</header>
<p>
Studio O’Riley believes in communication,
so we’re happy to answer any and all questions
you may have. If your question isn’t answered
on this page or any of the four above, please
feel free to <a href=“https://studiooriley.github.io/contact”>send us a message</a>!
</p>
<div class=“accordion”>
<div class=“accordion-item”>
<div class=“accordion-item-header”>
What is Studio O’Riley’s response to
the Coronavirus Pandemic?
</div>
<div class=“accordion-item-body”>
<div class=“accordion-item-body-content”>
The safety of our clients and ourselves
is our foremost concern. Luckily, Studio
O’Riley provides digital services, so
most business is conducted remotely.
</br>
</br>
In the case of an in-person meeting, masks
and social distancing measures are required.
If sufficient COVID-19 precautions are not
met by either party, the meeting will be
rescheduled or canceled, at the discretion
of one or both parties.
</div>
</div>
</div>
<div class=“accordion-item”>
<div class=“accordion-item-header”>
What services does Studio O’Riley offer?
</div>
<div class=“accordion-item-body”>
<div class=“accordion-item-body-content”>
See our <a href=“https://studiooriley.github.io/services”>services</a> page.
</div>
</div>
</div>
<div class=“accordion-item”>
<div class=“accordion-item-header”>
Do you provide artwork?
</div>
<div class=“accordion-item-body”>
<div class=“accordion-item-body-content”>
Yes! Studio O’Riley strives to be a creation
station of the first degree. If you like the
style of our products, then you’ll like our
custom artwork, tailored to your whims or
your brand, as you like it.
</div>
</div>
</div>
</div>
<footer>
<p class=“copyright-notice”>© 2022 Studio O’Riley — All rights reserved.</p>
</footer>
</body>
</html>Sorry for the long code. I'm new to coding and I don't know what might be relevant to answering this question. The only languages used in this project are HTML, CSS, and Javascript. To recap: I need to know:
- how to stop the FAQ page from repeating a section of the URL inside quotes.
- how to get the FAQ page to communicate with style.css.
- if I should not use the Clone app or if this was just a weird coincidental disaster.
Thank you so much for your patience and your help!
