Create a Media Query Problem on Chrome

HTML-CSS
1

Tell us what’s happening:
There is a problem with this challenge: The code is correct, but the challenge gives the following message:

// running tests

Your p element should have the font-size of 10px when the device height is less than or equal to 800px.

// tests completed

I followed the suggestion in another post to refresh the browser; but the result is the same.

I changed my browser to Safari, then it works. Why do I have to do that?

Now I have to do everything on Safari, instead of Chrome. I find chrome to be a better browser tool for web development.

Follow-UP:
For some reason, even after refreshing the page, the current chrome page did not get the new information that I had progressed beyond the current problematic challenge session when I used the Safari browser as a work-around for the problem stated above.

To continue using working with Chrome. I logged-out and logged-in again. That way, the new Chrome page now shows the next challenge session.

Your code so far

<style>
  p {
    font-size: 20px;
  }
  
  /* Add media query below */
 @media (max-height: 800px) { 
    p {
      font-size: 10px; /* the absence of the semicolon is a type -- which I am correcting here. */ 
                       /*The actual code - see my response with screenshot below - has the correct code.*/
    }
  }
    
</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_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36.

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

2

Your code PLUS the MISSING semicolon after 10px passed in my chrome browser the first time.

1 Like
3

Actually, there’s a semicolon on the actual code. My initial post above simply had a typo. Sorry about that.

Here’s the screenshot for that challenge/lesson:

45
452440×1404 552 KB

4

Cookie corruption is a thing. When I started FCC I would sit down and do lots of challenges and see how far I could get before I didn’t know something. When I knew I was right, and made sure there were no typos, the problem was often cookies. It’s easier to open the lesson in a new incognito tab than reloading in a different browser but both work. If your code passes then you know it’s time to delete your FCC cookies.

5

How do you propose to selectively delete the FCC cookies only. I’ve searched and I only see total cookies elimination. There are other chrome cookies that are really important for me to keep.

6

Depends on browser. Chrome, it’s hard for me to find too. I gather from your post you can open the settings page.

  1. type cookies in the search bar at the top.

  2. the next to last highlight is site settings click

  3. Cookies click

  4. The arrow after the third switch says:“See all cookies and site data” click

  5. Then use the search cookies field and input the domain name or scroll the list

7

Thanks for the instruction. I was able to eliminate all freecodecamp cookies. However, that did not fix the problem.

The only way I was able to get past this challenge problem was to use Safari (I am using a MacBook). The validation of my answer went smoothly. Then, in Chrome, I simply logged out and logged back in to freecodecamp so that the next challenge is displayed.

However, going back to the already completed challenge still gives the same error message. But it is moot right now since I am already past this problematically challenge.

I would appreciate it if any of the developers could determine if this issue is simply Chrome-specific.

Thanks.

8

This might be a problem from setting a larger minimum font size in Chrome.

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

It isn’t really Chrome specific, because you can set the minimum font size in other browsers, but it does mainly show up with Chrome. But that is to be expected considering how many more people use Chrome.

9