Can someone please tell me what I'm doing wrong here

Tell us what’s happening:

Your code so far


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

/* Only change code below this line */
@media (max-height: 800px) 
  p {
    font-size: 10px;
  }
/* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Create a Media Query

Link to the challenge:

1 Like

Hey @mustafaabbas0912!
Welcome to the Forum!

The media will also have brackets.

1 Like

the @media needs its own curly brackets after the max-height or before the p tag styling. Like this

@media (max-height: 800px)  {
          p  {
                 font-size:  10px;
              }
      }
2 Likes
@media (condition ){
    p{
         /*your code*/
       }
}
2 Likes

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
@media (max-height: 800px) 
  p {
    font-size: 10px;
  }
@media  ***screen  and*** (max-height: 800px) **{**
  p {
    font-size: 10px;
  }
**}**

Hey @RobbyPrice!
Welcome to the Forum!

It is good that you solved the Problem but try to give hints to the OP (Original Poster).