freeCodeCamp Challenge Guide: Create a Media Query

Create a Media Query


Solutions

Solution 1 (Click to Show/Hide)

Following the instructions:

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.

the media query is:

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

and the size of the text will be 10px when the device’s width is less than or equal to 800px.

66 Likes

Can someone please tell me why I can’t pass this challenge? I’m on the Responsive Web Design Projects now, but I was never able to get this 1 challenge to pass.

49 Likes

Media queries use max-width as a parameter, not max-height. You mistakenly wrote max-height in your media query. You need to use max-width.

5 Likes

When I changed “height” to “width” the first one still has an “X” by it and the second one (" Declare a @media query for devices with a height less than or equal to 800px." goes from having the green check mark to an “X”, so it must be something else. :woman_shrugging: Thank you for trying to help me though! I’m not sure if it’s a glitch or something really silly that I’m going to kick myself later for.

5 Likes

Ah, sorry- I didn’t realize the lesson was asking for max-height. When I used the same code as you in that same lesson, it passed the tests for me, so I am not sure what the issue is. Did you try to “Reset all code” to see if starting over works? What browser are you using? I think they recommend Firefox or Chrome for test suites.

11 Likes