Please help. I built my Landing Page using VS Code and using Live Server, then simply copied and pasted all my HTML and CSS into the Landing Page test page which is now part of the legacy Responsive Web Design curriculum. All the tests pass except for the Media Query and Flexbox tests, which you can see in my code I did include multiple times. It seems like something is wrong with this page’s testing code which prevents it from recognizing my media queries and Flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FreeCodeCamp Landing Page Project</title>
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/0a3a484bf4.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="/product-landing-page-logo.png" alt="original trombones logo">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Handcrafted, home-made masterpieces</label>
<input id="email" name="email" type="email" placeholder="Enter your email address">
<input id="submit" type="submit" value="Get Started">
</form>
<section id="features">
<div class="icon"><i class="fa-solid fa-fire-flame-curved fa-3x"></i></div>
<div class="flex-container">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
<div class="icon"><i class="fa-solid fa-truck fa-3x"></i></div>
<div class="flex-container">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
<div class="icon"><i class="fa-solid fa-battery-full fa-3x"></i></div>
<div class="flex-container">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</section>
<section id="how-it-works">
<iframe id="video" width="750" height="415" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="pricing">
<div class="pricing-container">
<h3>Tenor Trombone</h3>
<p class="first-p">$600</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum dolor.</p>
<p class="last-p">Lorem, ipsum.</p>
<input id="select" type="submit" value="select">
</div>
<div class="pricing-container">
<h3>Bass Trombone</h3>
<p class="first-p">$900</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum dolor.</p>
<p class="last-p">Lorem, ipsum.</p>
<input id="select" type="submit" value="select">
</div>
<div class="pricing-container">
<h3>Valve Trombone</h3>
<p class="first-p">$1200</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum.</p>
<p>Lorem, ipsum dolor.</p>
<p class="last-p">Lorem, ipsum.</p>
<input id="select" type="submit" value="select">
</div>
</section>
<footer>
<ul>
<li><a href="">Privacy</a></li>
<li><a href="">Terms</a></li>
<li><a href="">Contact</a></li>
</ul>
<p>Copyright© 2016, Original Trombones</p>
</footer>
</body>
</html>
* {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: #454747;
margin: 0;
padding: 0;
/* background-color: #dce1e1; */
}
a {
text-decoration: none;
}
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
overflow: hidden;
margin: auto;
width: 100vw;
max-height: 100px;
background-color: bisque;
}
img {
width: 300px;
}
#header-img {
flex-basis: 3rem;
}
#nav-bar ul {
width: 30%;
align-self: flex-end;
display: flex; /* nested flex container so the li elements will spread out */
justify-content: space-between;
padding: 5px 10px;
margin: 20px 70px 20px 20px;
}
header li, footer li {
list-style-type: none; /* to get rid of the bullet points */
cursor: pointer;
font-size: 16px;
min-width: 130px;
}
form {
padding: 20px;
margin: 100px auto 50px auto; /* 100px top margin to push it down below the navbar, 50 px on bottom to create some space before the features section */
width: 100vw;
text-align: center;
}
/* had to set to 'display: block;' to get attributes like padding & margin to work on these below. Labels and inputs are inline elements by default. */
form label {
display: block;
padding-bottom: 10px;
font-size: 30px;
font-weight: 700;
}
form #email {
display: block;
width: 20%;
min-width: 200px;
margin: auto;
margin-bottom: 10px;
padding: 5px;
text-align: left;
font-size: 16px;
}
form #submit {
display: block;
width: 10%;
min-width: 200px;
margin: auto;
text-align: center;
text-transform: uppercase;
font-size: 20px;
background-color: #c46a0a;
color: #fdfdfd;
border: 5px solid #c46a0a;
border-radius: 5px;
cursor: pointer;
}
#features {
width: 70vw;
margin: auto;
display: flex;
flex-wrap: wrap; /* to make elements wrap to next row */
align-items: center;
}
.flex-container {
flex-basis: 80%;
}
.flex-container h2 {
margin-top: 20px;
margin-bottom: 5px;
}
.flex-container p {
margin-top: 5px;
}
.icon i {
color: #ba3e3ef4;
}
.icon {
flex-basis: 20%;
text-align: center; /* this works to center it even when it's an image */
padding: 20px 20px;
display: inline;
}
#how-it-works {
display: block;
margin: 40px auto 60px auto;
text-align: center; /* worked to center the video just like the images above */
}
#pricing {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
margin: auto 2%;
justify-items: center;
}
.pricing-container {
display: flex;
flex-direction: column;
border: 5px solid #454747;
border-radius: 10px;
text-align: center;
width: 100%;
}
.pricing-container h3 {
background-color: #c5c7c7;
width: 100%;
margin: 0;
padding: 20px 25px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-transform: uppercase;
font-weight: 600;
}
.first-p {
margin-top: 30px;
font-weight: 600;
font-size: 20px;
}
.last-p {
margin-bottom: 20px;
}
.pricing-container #select {
margin: 30px 50px;
padding: 20px 25px;
background-color: red;
color: white;
text-transform: uppercase;
font-size: 18px;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
}
footer {
background-color: bisque;
margin-top: 50px;
display: flex;
flex-direction: column;
}
footer ul {
display: flex;
justify-content: flex-end;
padding: 10px;
/* overflow: hidden; */
/* margin: auto; */
width: 100%;
background-color: bisque;
}
footer li {
text-align: center;
padding: 5px 10px;
margin: 20px 20px 20px 20px;
}
footer p {
text-align: right;
padding: 0px 35px 30px 0px;
}
@media (max-width: 1110px) {
form #email {
font-size: 14px;
}
}
@media (max-width: 960px) {
#nav-bar ul {
flex-direction: column;
max-height: 70px;
padding: 15px 0;
}
}
@media (max-width: 756px) {
.icon {
display: none; /* had to wrap font awesome i tag in a div to get this to apply */
}
#pricing {
display: flex;
flex-direction: column;
}
}
@media (max-width: 660px) {
#header-img {
width: 200px;
}
iframe {
width: 450px;
height: 205px;
}
.nav-link {
font-size: 14px;
}
form label {
font-size: 20px;
}
footer ul {
flex-direction: column;
flex-shrink: 0;
/* max-height: 20px;
margin: 5px;
padding: 5px; */
}
}