Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Charles Hanson
Charles Hanson
8,368 Points
Posted by Charles Hanson
Charles Hanson
8,368 Points

Not changing blue or red

I have followed the directions in the video and double checked my code. I cannot get the background to change to blue or red. I have tried the other suggestions like adding all and and changing the min-width to 600px. Any suggestions? Thanks.

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

@media (min-width: 600px) {
  body{
  background: darkred;
  }
}
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points

Question updated with code formatting. Check out the Markdown Cheatsheet below the Add an Answer submission for syntax examples.

You need to use backticks (to the left of the "1" key on a US keyboard) instead of single quotes.

3 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Your code works for me. Can you post a snapshot of your workspace? It is the camera icon in the upper right corner.

Charles Hanson
Charles Hanson
8,368 Points
Charles Hanson
Charles Hanson
8,368 Points

Hello Kris,

Thanks for taking the time to help me. I am also noticing that the css for the arrow size and floats are not working properly. Here is the snapshot. https://w.trhou.se/e990p7ke8m

issa Mohamed
issa Mohamed
7,373 Points
issa Mohamed
issa Mohamed
7,373 Points

i tried everything and it is not working can someone help

eduardo valadez
eduardo valadez
2,290 Points 
@media (max-width: 960px) {
  body {
    background: royalblue;
  }
  p {
    color: white;
  }
}

this is correct make sure that you but adding an extra closing bracket on accident. i spent about 20 min trying to figure it out and that was my issue.

Justin Clay
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Clay
Front End Web Development Techdegree Student 3,292 Points
Justin Clay
.a{fill-rule:evenodd;}techdegree
Justin Clay
Front End Web Development Techdegree Student 3,292 Points

Not sure if this has been answered already, but it looks like you are using min-width instead of max-width. It should be max-width for your 600px statement.