Keep getting error

Question

I can't figure out what I am doing wrong. The challenge is: Create a media query that sets the body element's background color to #FF6347 and its text color to white if the viewport width is 768px or less. This is what I have, which passed initially, but then after I did the 2nd challenge it said the first no longer passed. 
@media screen and (max-width: 768px) {
        body {
      background: #FF6347;
        color: white;
    }
}
@media screen and (min-width: 480px) {
  body { 
    background: #4682B4;
  }
}
The second part was what I did for the 2nd challenge.

Stone Preston · Accepted Answer

you need to use max-width in your second query as well, not min-width. when you used min width it basically overrides your first media query, which is why task 1 was no longer passing
```
/* Complete the challenge by writing CSS below */
@media screen and (max-width: 768px) {
        body {
      background: #FF6347;
        color: white;
    }
}
/* use max-width: 480px here */
@media screen and (max-width: 480px) {
  body { 
    background: #4682B4;
  }
}
```

Jessica Raines · Answer

That was it. Thank you so much.

Welcome to the Treehouse Community

Looking to learn something new?

Jessica Raines

Jessica Raines

Keep getting error

2 Answers

Stone Preston

Stone Preston

Jessica Raines

Jessica Raines