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

Created on 12 Jan 2018 · 8Comments · Source: freeCodeCamp/freeCodeCamp

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

issue_screenshot

help wanted

Source

manikandanelangovan

Most helpful comment

@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 on 24 Jan 2018

👍3

All 8 comments

@manikandanelangovan Confirmed.
@raisedadead This is strange. If the first test passed then It's obvious that the second test should pass too(In my opinion). As the font-size will be 10px on devices with less than or equal to 800px viewport only when a media-query is declared.

vkWeb on 12 Jan 2018

We need help in analysis of this issue.

raisedadead on 16 Jan 2018

@manikandanelangovan The tests work fine. The challenge asks you to add a media query when the device's height is <= 800px. What you did was setting rule for max-width. 😄

huyenltnguyen on 17 Jan 2018

@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 on 24 Jan 2018

👍3

@ahmadabdolsaheb sure.

raisedadead on 24 Jan 2018

@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 :ship: it

ahmadabdolsaheb on 26 Jan 2018

👍1

the same issue for me....

even I entered correct answer, the test still fail...