Create a Media Query first test

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  p {
    font-size: 20px;
    
  }
  
  /* Add media query below */
  @media (max-height: 800px) {
    p {
      font-size:10px;
    }
  }
  
</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>

what’s wrong with my css code? i can not find the problem; Please help me!!! TKS!

2

Your code passes for me. Try using Chrome if you aren’t.

3

Thanks for replying.I’ve passed the test in another computer chrome, Maybe the problem is my computer’s network.

4

I think it should be max-width:

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

I didn’t notice that one on my first read!

6

No it isn’t. It’s height.

https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query/

1 Like
7

I had someone tell me my media queries weren’t working today. They were on ff Inspector. I could replicate their issue with Inspector only. Ff’s zoom and Chrome(dev tools and browser) worked fine. So, to confirm, it’s probably a ff issue.

8

Great!

I noticed that FCC exercises work best with Chrome.

1 Like
9

Your Code:

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

Answer:

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

Spacing issue? As said above, Chrome is the friendliest towards fCC.

10

I refresh my browser, re-input my code; now can run success.

1 Like