Create a Media Query "p" element

HTML-CSS
1

I keep receiving this message " Your p element should have a font-size of 10px when the device height is less than or equal to 800px"

Can anyone help me out please?

  **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 p element should have a font-size of 10px when the device height is less than or equal to 800px.

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 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

Screen Shot 2021-04-08 at 11.13.50
Screen Shot 2021-04-08 at 11.13.501191×742 158 KB

2

Hi isabella, welcome to the forums.

Your solution is not exactly the same as provided examples.
You forgot some brackets.

1 Like
3

Hey, thank you!

what brackets am i missing? I cant figure out where I’ve gone wrong, ive tried so many times haha.

4

Try to copy-paste code from lesson example just below your code.
You should see the difference when two are right next to each other.

Hint: count number of brackets in one of the examples, then count number of brackets in your code. You will know. ; )

1 Like
5

Ahh, sorry, my advice was a bit wrong.
Number of brackets will be the same as in examples.

Here is a link to media CSS rule. You will get it.

1 Like
6

I’ve just done that and that isn’t the problem. It’s the “p” tag that I’m having the problem with.

It says: “Your p element should have a font-size of 10px when the device height is less than or equal to 800px”

Which I thought id done correctly?

7

I’ve checked and I cant see what i’ve done wrong in my code. Take a look at the screen shot i posted and let me know if you have any other solutions.

8

I looked at your code and tested it at the very start.

Check again the link I have provided.
Count the number of brackets.
There are 6 brackets in the complete example.
You have only 4 brackets in your code.
You are missing one pair of curly ones.

9

Hi.

All of the selectors inside the media query need to be surrounded by curly braces also. Like this:

@media (max-width: 800px) {
// selectors
}

1 Like
10

Screen Shot 2021-04-08 at 11.37.44
Screen Shot 2021-04-08 at 11.37.441195×821 146 KB

Like this?

P.S Thank you for helping me! I’m so sorry, I’m completely lost on this one haha.

11

But the one im getting wrong is the “p” tag/element. Thats the question i cant pass. I’ve changed it and added more curly brackets but it says what im doing with the media bit is correct its the ‘p’ tag that wont let me pass.

12

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

Hope that helps.

2 Likes
13

Its supposed to be height not width but I’ve done this exact code using both width and height but still doesnt seem to pass me. Cant figure it out unless its a glitch? But i doubt they would be a glitch.

Thank you so much for your help though!

14

It is not a glitch.
The code trebleclef provided is a pointer, not a solution.

It should pass if you tried both width and height (did pass for me when tested).

1 Like
15

Sorry. Didn’t spot the height. Should work though if you’re surrounding your selectors inside the media query with curly braces. Sorry I can’t help more.

1 Like
16

Can you show me the code you would use to pass this and i will take a screen shot of your code to see if it passes on my laptop?

17

Can you show me the code you would use to pass this and i will take a screen shot of your code to see if it passes on my laptop? Because I honestly cant see what im getting wrong, feel like ive tried everything!

18

Read this. They where having the same problem as me so im guessing it must be a glitch?

19

Read this. They where having the same problem as me so im guessing it must be a glitch? Cant get my head around it. Ive moved on and passed the other modules but cant get this one to pass.

20

I am not at my laptop so am a bit limited.

In your screen shot, as far as I can see, you only need to move the closing curly brace that comes after your CSS rules comment to after the closing brace of the p selector. Just before the closing style tag.

1 Like