Creating a Media Query syntax

HTML-CSS
1

Tell us what’s happening:

I’m trying to figure out where to place my @media query in order for it to affect my

element.
I need to implement the following line into my code:

@media (max-height: 800px) {font-size: 10px
}

Your code so far


<style>
  p {
    font-size: 20px;
    
  
  /* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

2

just put it after the line that says /* Add media query below */

and make sure it ends before the end of the style section

hope this helps

3

That’s the first thing I tried. For some reason, it’s still not letting me past the exercise.

4

Think of it as a separate area
like this

<style>
  p {
    color: black;
  }
  
  /* the color will only be red at 100px or less*/
  @media (max-width: 100px) { 
    p {
      color: red;
    }
  }
</style>
5

Hi,
I think you missed ‘and’:

@media screen and (max-width: 340px){
/*styles*/
}```
6

I tried it the way you explained but it still won’t let me through. Can someone go to the challenge and show me the code they use to pass it?

7

Post your latest code, so we can review it.

@marzdor gave you a perfect example of using a media query to make p elements have a font color of red when the device’s height is less than or equal to 800px. Look carefully at @marzdor’s example and see where your’s differs (minus the font-size property reference).

8

in your code you are not selecting the p element inside the media query you are just doing this

@media (max-height: 800px) { 
      font-size: 10px;
     }

So you are saying at max height of 800px set font size of nothing to 10px;

10 
<style>
  p {
    font-size: 20px;
    
  
  /* Add media query below */
  @media (max-height: 800px) {
    p {text-size: 10px;}
  }
</style>
11

There is not such CSS property called text-size. Also, your p element selector (the top one) is missing a character which completes the definition. Again, look at the examples.

12

Bingo. Thank you all.

13