Get stuck in "Create a Media Query"

When doing execise “Responsive Web Design Principles: Create a Media Query”, it requires to add a media query, so that the p tag has a font-size of 10px when the device’s height is less than or equal to 800px.

My code can’t passed the test, it tells me “Your p element should have the font-size of 10px when the device height is less than or equal to 800px.”

Below is my code:

p { font-size: 20px; } /* Add media query below */ @media (max-height: 800px) { p { font-size: 10px; } }
1 Like

So, your code

  /* Add media query below */
   @media (max-height: 800px) {
    p {
      font-size: 10px;
    }
  }

its ok and should pass. Try reloading the page.

4 Likes

Thank you very much for your reply. I’ve reloaded it but still can’t pass. Maybe it is just a bug…

1 Like

What browser are you using? Try using Chrome.

1 Like

Thank you very much for your reply. I am actually using Chrome.

try this:
@media only screen and (max-height: 800px) {
p {
font-size: 10px;
}
}

1 Like

Hey Look You need to carefully all check the code then code the problems

Here is the Solution Please check this !!

  /* Add media query below */
@media (max-height: 800px) {
   /* CSS Rules */ 
   p {font-size:10px;}
}
 
1 Like

Thank you very much, but this still doesn’t work.

Thank you very much. It looks the same as my codes. I paste your solution but this still doesn’t work.

Let me show your all solution.

1 Like

Great thanks to your advice.
I am very glad to passed it just now. I downloaded lastest firefox and use the same code to pass the test. Seems it’s related to the version of browser.

I am very glad to passed it just now. I downloaded lastest firefox and use the same code to pass the test. Seems it’s related to the version of browser.

chrome://settings/fonts

3 Likes

This one had me confused as to the layout, so thanks for this reply. I totally understand now.

I have the exact same problem with you. I do believe that the code is right, but it just can’t pass.
So confused.

Change the browser to Firefox is the right answer.
Thanks you so much for solving this question.
I just get my certification about html-css.
Happy!

1 Like

If you’re reading this, I was working in Mozilla Firefox and changed temporally to Google Chrome, ran the tests and passed with no more issues.

I passed it by using FireFox, thx.

Weird, I just had the same issue with Chrome Version 69.0.3497.100 (Official Build) (64-bit) but it worked in FireFox 60.0.2 (64-bit)

Exact same here. Version 69.0.3497.100 (Official Build) (64-bit) chrome would not do it- FF whatever did.