Media Query not working?

I’m currently working through the Legacy Responsive Web Design course and I’m at the point of making my Product Landing Page. The course wants me to add a media query and I have but for some reason it keeps saying “Your Product Landing Page should use at least one media query.” Even though I’ve made one. Here’s my code for the media query. Any help would be much appreciated!

#products {
    height: 10%;
    margin-right: 10%;
    margin-left: 10%;
    background-color: rgb(248, 248, 248);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  @media (max-width: 800px) {
    #products {
      justify-content: space-around;
    }
  }

  @media (max-width: 600px) {
    #products {
      justify-content: space-between;
    }
  }

And for anyone wondering this is inside a <style> element

Hi @Bobling !

Welcome to the forum!

Did you link your css to the html document like the directions said?

Thank you! Yes I did. Is this how I was supposed to do it?

<link rel="stylesheet" href="styles.css">

Well, why don’t you try it?)

I was double-checking that I was doing it correctly. That line of code I had before this problem started.

Got it. So you still have problems with Landing page?

I think it would help us better identify the issue if you post your full code so we can test it on our ends and see the issue. :+1:

1 Like

Is the CSS not inside the file you linked to?

Try moving all the CSS to the styles.css file (i.e. click the styles.css button and add it inside that code panel) and remove it from the HTML.

Also, just to be clear, the <style> element can only be used inside HTML, not CSS.

Sure thing! Here’s the code:

<link rel="stylesheet" href="styles.css">

<style>

  
  #header {

  }

  #header-img {
    width: 60px;
    height: auto;
  }

  #nav-bar {
    background-color: rgb(248, 248, 248);
    display: block;
    position: fixed;
    top: 0;
  }

  .nav-link {
    margin-right: 10px;
    font-family: monospace;
    font-size: 20px;
  }

  #video {
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #form {

  }

  #email {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  #submit {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  
  #product {
    height: 75%;
    background-color: rgb(240,240, 240);
  }

  #products {
    height: 10%;
    margin-right: 10%;
    margin-left: 10%;
    background-color: rgb(248, 248, 248);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  @media (max-width: 800px) {
    #products {
      justify-content: space-around;
    }
  }

  @media (max-width: 600px) {
    #products {
      justify-content: space-between;
    }
  }
  


</style>


<header id="header">

  <nav id="nav-bar">
    <img id="header-img" src="https://pngroyale.com/wp-content/uploads/2022/02/Lego-Minecraft-Steve-Transparent-Images.png">
    <a class="nav-link" href="#video">Home</a>
    <a class="nav-link" href="#form">Contact Us</a>
    <a class="nav-link" href="#products">Products</a>
  </nav>
</header>

<body>
  <br>
  <br>

  <iframe id="video" src="https://www.youtube.com/watch?v=h4z-4owja-k"></iframe>

  <br>
  <br>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <p style="text-align:center; font-family:monospace; font-size: 20px;">Contact Us</p>

    <input name="email" id="email" placeholder="Enter your email address" type="email">

    <br>

    <input type="submit" id="submit">
  </form>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div id="products">
    <div id="product">
      <a href="">Basic Package</a>
    </div>
    <div id="product">
      <a href="">Medium Package</a>
    </div>
    <div id="product">
      <a href="">Pro Package</a>
    </div>
  </div
</body>

That worked! Thank you so, so much!