Create a @Media query

Tell us what’s happening:
i tried to re do
came here for help but nothing has worked
even the spoiler
"watchh a video " didnt get me past this section

  **Your code so far**

<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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36 Edg/95.0.1020.40

Challenge: Create a Media Query

Link to the challenge:

Can you at least post the code you did try? Right now you just have the starting code.


  1. Create the media query.
@media () {

}
  1. Add the condition max-height: 800px inside the parentheses ().

  2. Add the p { } selector inside the media query and set font-size to 10px.


If you have the right CSS but it still doesn’t pass.

Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Ad Blocker), and set your browser zoom level to 100%. Or try in a different browser.

can you check my recent re post
i tried maybe that if not something very similiar

Tell us what’s happening:
researched on google
tryed something new
cant seem to pass this section
i get only one of 3 checks here

  **Your code so far**

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

/* Only change code below this line */
@media screen and (min-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/95.0.4638.54 Safari/537.36 Edg/95.0.1020.40

Challenge: Create a Media Query

Link to the challenge:

Two issues.

No1.:
Just use @media here.
Not @media screen and

No.2:
It shouldn’t be min-height
It supposed to be the opposite.

The test is looking for device’s height is less than or equal to 800px .

When I fix those two things then it passes.

1 Like

omg
your awesome
thank you
it passed

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.