Create a Media Query - 20180924

HTML-CSS
1

Tell us what’s happening:
I don’t know how to set the font-size to only be 10px whenever the screen size is equal to or less than 800px. The lesson doesn’t give enough details for me to continue.

Your code so far


<style>
  p {
    font-size: 20px;
    name: small-devices; 
  }
  @media small-devices (max-width: 800px) {
    font-size: 10px;
    /* CSS RULES */
  }
  /* Add media query below */
  
</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_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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

2

this is what the lesson use as example:

@media (min-height: 350px) { /* CSS Rules */ }

and this is exactly what you need^^
the CSS rule to use is the one indicated in the challenge instruction ( the p tag has a font-size of 10px).

About what you’ve tried:

  • @media does not need to be referenced through a name, they ‘trigger’ when the condition specified in the media itself verifies ( in this case, max-height: 800px)

  • The property to use should be max-height, not max-width

  • The css rule has to be written entirely, not just the declaration: you’re missing the selector part ( here you can find a visual representation of the css syntax: W3School : CSS syntax )