Stuck with @media queries

Hi everyone! I’m trying really hard to pass this final part of my project, however I can’t get my @media query to work. I’ve looked on YouTube, gone through the old lesson but can’t figure out where I’m going wrong.

I’m trying to get the font color to change to red when the height is less than 500px.

Here’s a link to my project (sorry it’s messy, I’ll also take any general advice on setting out code to be most legible).

Thanks for your help!

If you analyze css you have an unclosed block,

also be more specific with your selectors, e.g.

  @media (max-height: 500px) {
   header li a, header h1 {
      color:red;
    }
  }

will change the colour of both the h1 and the anchor tags inside the header

Have tested this and it works for me and all tests pass

Also the header element needs to be inside the <body> tag as this is page content. I’ve added a <head> element here - this is where meta data goes.

Also for future reference… I think codepen sorts this automatically so you don’t need to worry about it in this instance but if you were writing html from scratch in an IDE you would need to include the following meta tag inside your head tag for media queries to work:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hey thank you so much for your quick reply. To be honest I wasn’t aware of the analyse tool, very helpful.
Cheers!

You’re welcome, glad I could help,

Some of the html looks like it needs reorganising, e.g.

  <h3><section id="Food">
    <ul>Food</ul></h3></section>
    
  <li>Vegemite</li>
    <li>Parmy (Not Parma or Parmesan)</li>
    <li>Lollies</li>
    <li>Schnitty</li>
    <li>Pie</li>
    <li>Sossie Roll</li>
    <li>Roo</li>
    <li>Steak</li>
    <li>Lamb</li>
    </ul>
    </p>

should be structured more like:

<section id="Food">
    <h3>Food</h3>
        <ul>
            <li>Vegemite</li>
            <li>Parmy (Not Parma or Parmesan)</li>
            <li>Lollies</li>
            <li>Schnitty</li>
            <li>Pie</li>
            <li>Sossie Roll</li>
            <li>Roo</li>
            <li>Steak</li>
            <li>Lamb</li>
        </ul>
</section>

Would definitely recommend using vscode over codepen as it’s much easier to see the code clearly and so it enables you to organise it much better,

You can also install extensions like Prettier, Emmet, Highlight Matching Tag and loads of others to make writing html easier and cleaner.

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