Create a Media Query BUG PLEASE HELP

HTML-CSS
1

Tell us what’s happening:
I have the correct code. It is not accepting my answering letting move on to the next challenge. I have double checked my answer with online resourcing and professional coding friends.

Do I have to contact the support team or is there a solution that I am not seeing?

Your code so far


<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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

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

2

I skipped that challenge for now and went on to the next challenge. It completed the next challenge and hit “Run the Tests” and the next challenge worked. So the Bug is on that particular challenge. I looked through the forum for an answer and tried to adjust my google chrome font size - it is currently set at medium (recommended).

Please help me. Thank you!

3

I don’t think there is a bug. It works for me. Try a different browser or clear your browser history.

4

I cleared browser history, cookies, etc before making this post. IE doesn’t load the coding sandbox. I guess I will download firefox and see if that works. I will respond with results. Thank you.

5

Ok. Thank you - eoja.

Here is the solution to anyone seeking a resolution to this problem.

Use Firefox web browser.

I cleared the entire history on my chrome and it still would not work. I downloaded a fresh install of Firefox and the tests ran perfectly and now the challenge is solved.

Never give up. A problem is just a test of your perseverance.

6

What is the minimum font size setting in Chrome if you look here:

Put this chrome://settings/fonts into the address bar and checking the minimum font size settings.

Edit: BTW this issue should be fixed in the new version of the curriculum that hopefully will get pushed to the site soon (TM).

7

I had the font size on the chrome browser set for smaller- since I use a 40 inch screen. I changed the font size to medium (recommended) setting. This did not fix the error.

Edit: I have now tried every font size available to chrome with no different result.

8

Did you try using the link I gave, it gives you actual numbers in px

Side note: use the @username or reply button to make sure people get notified when responding to them.

9

@lasjorg Your solution works as well. I was in those settings, but only changed the font size not the minimum font size. So now there are two solutions. Least both browsers work for the challenge now. Thank you. Much appreciated.

1 Like