These media queries did not apply and I've double checked my syntax and spelling, Im not sure if something is overriding

Hi Deborah,

I am not sure if I am seeing all your code but I think the problem could be you don't have all the closing brackets you need. This is what I think you are trying to to do:

@media (max-width: 960px) {
  body {
    background: royalblue;
  }
}

@media (max-width: 480px) {
  body {
    background: darkred; 
  }
}

@media (min-width: 481px) and (max-width: 700px) {
  body {
    background: seagreen;
  }
  p {
    color: white;
  }
}

I added in a couple "}" that were missing. I hope this helps.

Heidi

Hi! In my case the browsers ignores the second media query, the one with the darkred background. I just copied Heidi Fryzell's code, which seems correct, but I still can't see the transition to the red background.

I also had this problem and I think the problem is you have to small of a screen so you should change the pixels to a larger amount. I changed mine to 580px and if this does not work I don't think I can help.

The only way I could get this to work was to look it up and use this instead:

@media screen and (max-width: 960px) { body { background: royalblue; } p { color: white; } }

adding "screen and" made everything work just fine.

I had to remove "all" for this to work.

Thank you! I appreciate it!