Create a Media Query fails on max-height

Create a Media Query fails on max-height
0.0 0

#1

On the new curriculum I’m getting the error message: “”“Your p element should have the font-size of 10px when the device height is less than or equal to 800px.”""

Not passing the test although I think this should work. Checked spacing and tried independently of editor and worked playing around with it here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_bg

Thoughts?


<style>
  p {
    font-size: 20px;
  }
  
  /* Add media query below */
  @media (max-height: 800px) {
    p {
      font-size: 10px;
    }
  }
</style>
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query


#2

The code is correct. Try reloading the page.


#3

No effect. Tried resetting the code and typing it in again as well. ¯\_(ツ)_/¯


#4

Well I don’t know then. I would try reading the console just in case, or open it in another browser, but if you tried it in w3schools and it worked…

I tried it in the actual challenge and it passes :thinking:


#5

Your code is right. this might be bug in editor, you can try another browser.


#6

The code is right and it passes the test. What is the error you get?


#7

sorinr: The error was in first sentence of my post!

Fixed:
If anyone else gets this error I fixed it by doing the following: I replaced the 20px at the top outside the @media code with 10px to fake out the test, which passed. Then replaced it back to 20px, and then the thing worked, passing the test!? Mkay