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

stephenallison
stephenallison
8,559 Points
Posted by stephenallison
stephenallison
8,559 Points

Media Queries- Not sure what's wrong with my syntax

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

Unable to see the blue screen. Not sure whats wrong with my code.

Richard Murray
Richard Murray
3,894 Points
Richard Murray
Richard Murray
3,894 Points

Perhaps your body div is being completely filled up by other elements. This would make the body's background not show through.

The p {color:white;} is working? Try changing that and see if it works. If that changes, then the @media works and the body background is covered up.

Andrelo Coyac
Andrelo Coyac
4,877 Points
Andrelo Coyac
Andrelo Coyac
4,877 Points

Maybe you should try using the number like "background: #4169E1" OR instead you can change it to "background-color: #4169E1", you should try that out

Also make sure you close the body section after all the code you've written.. good luck!

mike o'shea
mike o'shea
9,917 Points
mike o'shea
mike o'shea
9,917 Points

Had similar but felt it was ok.,because when I resized the screen I would see flashes of blue and re-brick at side. Realised when I refreshed browser the main header was filling the screen and when I scrolled down the changes were there.

4 Answers

Michael Cooper
Michael Cooper
2,961 Points
Michael Cooper
Michael Cooper
2,961 Points

I was having the same problem, until I moved the the query's to the top of the CSS file.

...also noticed that safari is having trouble with the second @media query, but it works fine in chrome.

benjamind
benjamind
6,442 Points
benjamind
benjamind
6,442 Points

The body background color is defined like this:

body {
    background-color: lightblue;
}
shaunhoyes
shaunhoyes
17,972 Points
shaunhoyes
shaunhoyes
17,972 Points

Be sure to resize the window (shrink your browser) to notice the change in background color.

internettraveller
internettraveller
4,028 Points
internettraveller
internettraveller
4,028 Points

Is your computor a Mac or are you on Windows? You Can only code on A mAN