Get stuck in "Create a Media Query"

HTML-CSS
1

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
2

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
3

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

1 Like
5

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

6

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

1 Like
7

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
8

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

9

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

10

Let me show your all solution.

1 Like
12

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.

13

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.

14

chrome://settings/fonts

2 Likes
15

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

16

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

17

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
18

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.

19

I passed it by using FireFox, thx.

20

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)

21

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

22

yeah,the Chrome min font-size is 12px