Responsive Web Design Principles: Create a Media Query error

Responsive Web Design Principles: Create a Media Query error
0.0 0

#1

In Responsive Web Design Principles: Create a Media Query, I have entered what I think is the correct code, but it says “Your p element should have the font-size of 10px when the device height is less than or equal to 800px.” I looked it up on the forums and found this Create a Media Query fails on max-height where they input the same code I did, and they received the same error. Everyone in the linked thread said the code was correct, and that it was an error in the editor, so here I am reporting it :joy:

My code:

<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>

#2

Are you by any chance using Edge, IE, or Safari as your browser? These have decided not to implement new features of JS and CSS according to web standards and as a result they often exhibit unintended (and frustrating) behavior.


#3

Google Chrome 67.0.3396.87 64-bit


#4

It actually is a browser issue, apparently Chrome resizes text smaller than 10px to 12px (https://github.com/freeCodeCamp/freeCodeCamp/issues/17629) so I had to open it in Mozilla Firefox 60.0.2. It’s kind of frustrating that I spent 10 minutes reviewing the right code thinking it’s wrong, so maybe there should be a note saying it won’t work on Chrome or maybe resize the required font-size to 12px? (These are suggestions from the referenced thread not my ideas.) Anyway Thanks ArielLeslie, for pointing me in the right direction <3


#5

It works perfectly for me in Chrome. The default minimum font size is set to “tiny” at chrome://settings/fonts


#6

We’re on different versions of Chrome then? My default is right in the middle, 12px, and I’ve never changed my font settings.


#7

Thanks for the Mozilla Firefox tip. Chrome wouldn’t pass it but Firefox did.


#8

Possibly. Or maybe at some point you let Chrome import settings from another browser? Or if might somehow result from an OS setting? The world may never know.


#9

I had the same experience. I spent a long time fiddling with this code, googling it, and trying various “fixes” in Chrome Canary. No luck. Then I read the browser tip here and hopped over to Firefox. Took me less than a minute to get the code to pass.


#10

I thought I was having browser issues too so went in to Chrome and adjusted font settings with no luck. Downloaded Firefox and no luck there either. Turns out I just missed the parenthesis that are supposed to surround the p {font-size: 10px; } section. :joy::joy:
Hope that helps someone