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

Posted by Minh Le
Minh Le
Courses Plus Student 4,264 Points

Can you please help me? I didn't see the change to red or seagreen when I resize.

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

@media (max-width: 800px) { body { background: red; { }

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

4 Answers

Liam Clarke
Liam Clarke
19,938 Points

Hi Minh

You have a syntax error, CSS is good at hiding these syntax errors and quietly braking so I recommend structuring your CSS neatly to make it more readable.

After each CSS property, you have an opening curly brace, you should have a closing curly braces

Your code

/* Media Queries -------------------- */ 
@media (max-width: 960px) {
    body { 
        background: royalblue; 
    { /* Wrong way */
}

@media (max-width: 800px) { 
    body { 
        background: red; 
    { /* Wrong way */
}

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

As you can see above you have some curly braces opening instead of closing

Solution

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

@media (max-width: 800px) {
    body {
        background: red;
    }
}

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

Good Luck

Minh Le
PLUS
Minh Le
Courses Plus Student 4,264 Points
Minh Le
Minh Le
Courses Plus Student 4,264 Points

Hi Liam,

Thanks so much for your help. That works!

Minh

Delicia Wharton
seal-mask
.a{fill-rule:evenodd;}techdegree
Delicia Wharton
UX Design Techdegree Student 11,098 Points
Delicia Wharton
.a{fill-rule:evenodd;}techdegree
Delicia Wharton
UX Design Techdegree Student 11,098 Points

It still doesn't work for me on the seagreen part (only the blue and then red shows up, it never turns sea green and i have the same code i think). 

/* Media Queries -------------------- */

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

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

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

}
Fabio Dolcemascolo
seal-mask
.a{fill-rule:evenodd;}techdegree
Fabio Dolcemascolo
Front End Web Development Techdegree Student 6,435 Points
Fabio Dolcemascolo
.a{fill-rule:evenodd;}techdegree
Fabio Dolcemascolo
Front End Web Development Techdegree Student 6,435 Points

Hi there,

It doesn't work for me only with the red command. Please help.

/* Media queries -------------------- */

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

}

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

}

}

@media (min-width: 481px) and (max-width: 700px) {

body { background: seagreen; }

p { color: white; } }