Why doesn't the media query work? How do I fix the two missing tests that fail?

HTML-CSS
1

Tell us what’s happening:

  • I am unable to fix the two tests, that fail.
  • I do not understand, why only the media query for the big screen works and the alternative does not. #hmpf

Your code so far

media queries

@media screen and (min-device-width: 1000px) {
  h1 {
    font-size: 60px;
  }
  h2 {
    color: DimGray;
    font-size: 40px;
  }
  p {
    font-size: 30px;
  }
}

@media screen and (max-device-width: 999px) {
  h1 {
    font-size: 30px;
  }
  h2 {
    color: DimGray;
    font-size: 20px;
  }
  p {
    font-size: 12px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hello @mseibert! The reason why your media queries don’t work, is because you should write it like this:

@media screen and (min-width: 1000px) {
}

@media screen and (max-width: 999px) {
{
  • By removing the -device- on your media queries because that won’t work , and for best practice don’t use random numbers use appropriate screen resolutions like: Ex. @media screen and (min-width: 768px).

Here’s a reference about Media Queries:

3

Thanks a lot. This is working now.

Unfortunately the two missing tests in https://codepen.io/mseibert/pen/BaKxXRx still do not pass. Can you see why?

4

Nevermind. I have figured it out by myself when I analyzed the sample page that is linked in the task description. #resolved

1 Like
5

You’re welcome @mseibert! :blush: