Create a Media Query 2

HTML-CSS
1

Tell us what’s happening:
i don’t know what it means by initial font-size because its there already.

Your p element should have an initial font-size of 20px when the device height is more than 800px.

p { {/*CSS Rules*/} font-size: 20px } /* Only change code below this line */ @media (max-height: 800px){ p{font-size: 10px} } /* Only change code above this line */

Your code so far


<style>
p {
  {/*CSS Rules*/}
  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 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36.

Challenge: Create a Media Query

Link to the challenge:

2

Hello!

They said 20px not 10px

3

Hi @DANIEL4JESUS
YOUR code should be like to pass the challenge :

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

Add a media query, so that the p tag has a font-size of 10px when the device’s height is less than or equal to 800px. this is the challenge.

@media query for devices with a height less than or equal to 800px.

Passed

Your p element should have a font-size of 10px when the device height is less than or equal to 800px.

Your p element should have an initial font-size of 20px when the device height is more than 800px.

5

yes , i got that and was given a pass mark in 1 an d 2 but the 3rd is where i was marked wrong. which is this:
Your p element should have an initial font-size of 20px when the device height is more than 800px.

6

I think it should pass the whole challenge
I tried that and I pass the challenge!

7

i was marked right in this: @media (max-height: 800px){ p{font-size: 10px} }.

You should declare a @media query for devices with a height less than or equal to 800px.

Passed

Your p element should have a font-size of 10px when the device height is less than or equal to 800px.

Your p element should have an initial font-size of 20px when the device height is more than 800px.

i got the first 2 but the 3rd is the issue.

8

even the demo video did the same thing i did , so i don’t really know what could be wrong

9

First, make sure your code are between the green lines in the editor.
Second, refresh your browser and open the site again.
May this help you.

10

You Forgot a ;
that’s why it didn’t pass

11

this is the starting code:

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

  /* Only change code below this line */

  /* 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>

you changed code outside of when indicated, your code could be failing for that

also, adding a block inside a selecotr is wrong:

p {
  {/*CSS Rules*/}
  font-size: 20px
}

here the line {/*CSS Rules*/} is wrong syntax, you have put a block inside an other block, in CSS you can’t do that

12

that is not my work, it came with the challenge like that.
below is the only work from me:
@media (max-height: 800px){ p {font-size: 10px;} }

13

this is not how it’s in the starting code,
this is the starting code for that part:

14

thanks alot, you got it