Problem regarding the media query challenge

HTML-CSS
1

Tell us what’s happening:
i am not able to complete this code of @media (max-height: 800px)

Your code so far
@media (max-height: 800px) { /* CSS Rules */ } {
body {
font-size: 10px
}
}


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


@media (max-height: 800px) { /* CSS Rules */ } {
body {
  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/80.0.3987.163 Safari/537.36.

Challenge: Create a Media Query

Link to the challenge:

2

Hey @namitjain201, How are you?
I see two issues in your snipped:
First one: the CSS rule for the body element is actually outside the media query:

@media (max-height: 800px) { /* CSS Rules */ } {
body {
font-size: 10px
}
}

While it should be inside, like this:

@media (max-height: 800px) { 
  /* CSS Rules */
  body {
  font-size: 10px
  }
}

Where you can, of course delete the /* CSS Rules */ comment if you prefer.
Think about the media query as a container with the format:

@media (WHEN) {  WHAT }

Second one: you are targeting the body with your rule while you should be targeting the p elements instead.

Please, Let me know if I was not clear in something :slight_smile:

Stay Safe