Create a Media Query -

HTML-CSS
1

Tell us what’s happening:

I tried to create media query but I kinda not getting the grip of it. I know i declared it wrong. but i need to know what is the right way to create a Media Query.

Your code so far


<style>
  p {
    font-size: 20px;
  }
  
  /* Add media query below */
  @media (min-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/68.0.3440.84 Safari/537.36.

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

1 Like
2

It should be max-height instead of min-height. Max-height means everything from 0 to whatever value. Min-height means everything from whatever value to infinite.

1 Like
3

Thank you.
I wrote min-height, because it says less than or equal to 800 px, so I thought of putting min-height to go down the 800 and not higher.

Many thanks, your solution worked.

4

image
image836×770 23.2 KB

chrome define the smallest font-size, so when you set your font-size with 10px, you can find your font haven’t been changed```,then set your chrome with custom font item.

4 Likes