Media query not passing despite working

Passed all tests apart from the one requiring me to write a media query. Product landing page challenge. Tried both Chrome and Safari

#submit {
    width: 170px;
    height: 30px;
    margin-bottom: 50px;
    margin-top: 15px;
    border: 0;
    background-color: #f1c40f;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase; 
    border-radius: 2px;
    cursor: pointer;
}


#header-img {
    width: 300px; /* Set the width of the logo image */
    height: auto; /* Maintain the aspect ratio */
    padding: 20px;
    
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;  
   position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: ddd;
  
}

.spacer {
  width: 300px; /* Set the width of the logo image */
    height: auto; /* Maintain the aspect ratio */
    padding: 20px;
}


#nav-bar ul {
  list-style: none;
  padding: 0;
  display: flex;
   
}

#nav-bar {
  list-style: none;
  padding: 0;
  display: flex;
  z-index: 1000;
   
}

#nav-bar li {
  margin-right: 20px;
   
}

#nav-bar a {
  text-decoration: none;
  color: #333;
  font-size: 1.2em;
  font-weight: semi-bold;
}

#nav-bar a:hover {
  color: #f1c40f;

}

* {
  body {
    background-color: #eee;
    font-family: 'Lato', sans-serif;
}


.content {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center horizontally */
  height: 100vh; /* Ensure the content takes up the full viewport height */
}

#video {
  padding: 20px;
  margin-top: 50px;
}

.desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

#form {
  display: flex;
  flex-direction: column;
  align-items: center;

}

input {
  width: 300px;
  height: 30px;
}

.desc1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
 
}

.desc h2 {
  line-height: .25
}

#pricing {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.btn {
  width: 100px;
    height: 30px;
    border: 0;
    background-color: #f1c40f;
    font-size: 1em;
    font-weight: 900;
    text-transform: uppercase; 
    border-radius: 2px;
    cursor: pointer;

}

.product {
   display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px;
    text-align: center;
}

ol {
      list-style: none;
      padding-left: 0;
}


footer {
    margin-top: 30px;
    background-color: #ddd;
    padding: 20px;
    width: 100%;
  
}

ul {
      list-style: none;
      text-align: center;
      display: flex;
      flex-direction: row;
    justify-content: center;
    
    }

    @media (max-width: 768px) {
  #header {
    font-size: 12px; 
  }
}

    span {
      display: flex;
      flex-direction: row;
    justify-content: center;
    }


Please post your HTML as well.

1 Like
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<header id='header'>
  
  <img src='https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png' id='header-img'>
  
  <nav id='nav-bar'>
    <ul>
      <li><a href='#features' class='nav-link'>Features</a></li>
      <li><a href='#video' class='nav-link'>How it works</a></li>
      <li><a href='#pricing' class='nav-link'>Pricing</a></li>
    </ul>
  </nav>
  <div class='spacer'></div>
</header>
 <div class="desc1">
              <h2>Handcrafted home-made masterpieces</h2>
              </div>
<form id='form' action='https://www.freecodecamp.com/email-submit' method='post'>
  <input type='email' id='email' name='email' placeholder='Enter email'></input>
  <input id='submit' type='submit' value='GET STARTED'></input>
</form>
<section id="features">
        <div class="desc">
              <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="desc">
              <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="desc">
              <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>
<div class='content'>
<iframe id='video' width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="Roman Carnival Overture Op. 9 for Five Trombones" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<section id="pricing">
          <div class="product" id="tenor">
            <div class="level">Tenor Trombone</div>
            <h2>£600</h2>
            <ol>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum dolor</li>
              <li>Lorem ipsum</li>
            </ol>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="bass">
            <div class="level">Bass Trombone</div>
            <h2>£900</h2>
            <ol>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum</li>
              <li>Lorem ipsum dolor</li>
              <li>Lorem ipsum</li>
            </ol>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="valve">
            <div class="level">Valve Trombone</div>
            <h2>£1200</h2>
            <ol>
              <li>Plays similar to a Trumpet</li>
              <li>Great for Jazz Bands</li>
              <li>Lorem ipsum dolor</li>
              <li>Lorem ipsum</li>
            </ol>
            <button class="btn">Select</button>
          </div>
        </section>

</body>
<footer>
  <span>Copyright 2016, Original Trombones</span>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          
        </footer>
</div>
</html>```

Hope this helps! Thank you in advance :)

This is not a valid selector and is causing an error

* {
  body {
    background-color: #eee;
    font-family: 'Lato', sans-serif;
}

If you fix that it should pass.

1 Like

Thank you my friend!! This one had me stumped

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.