Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Not sure why my media query isn’t being recognized when i run the tests on this code…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header id="header">
      <img width="70%" id="header-img" alt="fender logo" src="https://assets.spotlight.fender.com/logos/Fender-Logo-JPG_1211322105.jpg">
      <nav id="nav-bar">
        <ul>
        <li><a class="nav-link" href="#guitars">Guitars</a></li>
        <li><a class="nav-link" href="#basses">Basses</a></li>
        <li><a class="nav-link" href="#amps">Amps</a></li>
      </ul>
      </nav>
    </header>
    <section id="company-description">
      <p>The Fender Musical Instruments Corporation (FMIC, or simply Fender) is an American manufacturer of instruments and amplifiers. Fender produces acoustic guitars, bass amplifiers and public address equipment, however it is best known for its solid-body electric guitars and bass guitars, particularly the Stratocaster, Telecaster, Jaguar, Jazzmaster, Precision Bass, and the Jazz Bass. The company was founded in Fullerton, California by Clarence Leonidas "Leo" Fender in 1946. Its headquarters are in Los Angeles, California.</p>
    </section>
    <section id="video-section">
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/2yXm_3dEBNA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </section><br>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label for="email">Fender Newsletter: </label>
      <input id="email" name="email" type="email" placeholder="Email address">
      <input id="submit" type="submit" formaction="https://www.freecodecamp.com/email-submit">Sign Up</input></input>
    </form><hr>
    <section id="guitars">
      <ul>Guitars:
        <li>Telecaster</li>
        <li>Stratocaster</li>
      </ul>
    </section><hr>
    <section id="basses">
      <ul>Basses:
        <li>Precision Bass</li>
        <li>Jazz Bass</li>
      </ul>
    </section><hr>
    <section id="amps">
      <ul>Amps:
        <li>Princeton</li>
        <li>Twin Reverb</li>
      </ul>
    </section>
  </body>
</html>
/* file: styles.css */
#header {
  display: flex;
  flex-direction: row;
}

ul {
  list-style-type: none;
}

#nav-bar {
    position: fixed;
    top: 0px;
    width: 100%;
}​

@media (max-width: 1000px) {
  #company-description {
  background-color: black;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You’ve got some sort of weird invisible character directly after the closing curly brace on this ruleset. Once I delete it then the media query passes.

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