Responsive design-Media query

HTML-CSS
1

Tell us what’s happening:
Where am i getting it wrong?

Your code so far


<style>
p {
  font-size:20px;
}

/* Only change code below this line */
p {font-size:10px;}
@media {max-height:800px;}
/* Only change code above this line */
</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 (Linux; Android 7.0; TECNO WX3 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36.

Challenge: Create a Media Query

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

2

Actually, you applied the media query but you never specified what should happen to p elements on a screen size of maximum height of 800px and lesser pixel sizes.

3

Hi,

You are typing the wrong code for your media tag .
HERE IS THE RIGHT WAY OF TYPING!!!

@media (max-height; 800px ) {
you need to write the new codes here like :
example ( this should be the name of your tag or class ) {
background: black ; }

now the black background will be added when you screen is 800px or less.

4

This is a selector:

p {
  color: red;
}

This is a media query:

@media (max-width: 980px) {

}

The selector that you want to target for a given media query goes inside the media query.

@media (max-width: 980px) {
  p {
    color: blue;
  }
}