I can't solve the 3rd problem

Tell us what’s happening:

   **Your code so far**

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

 /* Only change code below this line */
@media(max-height:800px){p{font-size:10px;}}
@media(min-height:800px)
{p{font-size:20px;}}
 /* 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.1.2; SM-500A0 Build/N2G48C) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 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

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

isn’t there a “link to the challenge”??

Your link to the challenge says less than or equal to 800px. Just one media query. You have two media queries.

yeah. please solve the second query

Learning how to articulate what problems you are having is a critical skill if you want to learn how to write code. The more information you provide, the easier it is for others to help you. Also, the process of describing problems in code often helps you improve your understanding and sometimes helps you find issues on your own.

We do not hand out answers to challenges on the forum; however, we are more than happy to discuss the challenge with you and help you repair your misunderstandings.


now how do i make two queries? I’ve done like this

there is this - why did you change code above the comment that says where to change?

also

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 .

did you add that (and only that)?

also, no, screenshots are not recommended, post your code instead, and ask your question(s)

1 Like

oh. i just did that to see if the problem solves or not.

but the main problem is:
Your p element should have an initial font-size of 20px when the device height is more than 800px.
how do I do it?

@media(min-height:800px)
{p{font-size:20px;}}

how do i add it with the similiar type of query above?

have you changed your code from how it was in your first post?

first can you tell me if can come to this forum page from the website? I mean how can I open it in a single tab? 'cause now I’m using 2 different tabs for it. so I’m having a little problem

and I’ve reseted the course. so I tried everything from the beginning

what do you mean with that? the forum is at forum.freecodecamp.org, you have the link in the user menu from the curriculum

I get it that it’s good to solve every problem myself but I’m not going anywhere with this.

“Your p element should have an initial font-size of 20px when the device height is more than 800px”-----this is the problem which I’m facing.

and I’ve done this. show me the error in it.

<style>
  p {
  font-size: 10px;
  }
  /* Only change code below this line */
 @media(min-hight:800px)
 {p{font-size:20px;}}
@media(max-height:800px){p{font-size:10px;}}
/* Only change code above this line */
</style>

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 (’).

This is the starting code:

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

  /* Only change code below this line */
  /*
     YOU HAVE IGNORED THESE COMMENTS.
     IGNORING THESE COMMENTS CAN OFTEN
     MAKE YOUR CODE FAIL.
  */
  /* Only change code above this line */
</style>

Also, you should only have one @media

1 Like

ahh! great. thanks. I’ve got it