Responsive Web Design Principles: Create a Media Query - Test won't pass

Challenge Name

Responsive Web Design Principles: Create a Media Query https://beta.freecodecamp.org/en/challenges/responsive-web-design-principles/create-a-media-query

Issue Description

Even though the correct answer was submitted it shows the error message, the output of the code is changed properly in the preview panel but the instructions panel is still showing the error message as “Declare a @media query for devices with a height less than or equal to 800px”.

Browser Information

• Browser Name, Version: Google Chrome, Version 65.0.3318.0 (Official Build) canary (64-bit)
• Operating System: MacOS High Sierra
• Mobile, Desktop, or Tablet: Desktop

Your Code

@media (max-width: 800px) {        
     p {
       font-size: 10px; 
    }
  }

Screenshot

[ahmadabdolsaheb]

@raisedadead @vkWeb @manikandanelangovan

the correct answer is: @media (max-height: 800px) { p { font-size: 10px; } }

the tests are fine but the description could be improved by adding height, width, max and min to the example so the user learns about the possibilities and have more context to solve the challenge.

If you are interested i could make a PR to change the example part of the description to the following:

Here’s an example of a media query that returns the content when the device’s width is less than or equal to 100px:

@media (max-width: 100px) { /* CSS Rules */ }

and the following media query returns the content when the device’s height is more than or equal to 350px:

@media (min-height: 350px) { /* CSS Rules */ }

Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.

[ahmadabdolsaheb]

@raisedadead @huyenltnguyen @vkWeb, it is my first PR after a while so not sure if it gives a notification to the moderators or not 😃 let’s 🚢 it