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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

James Eaves
James Eaves
1,376 Points
Posted by James Eaves
James Eaves
1,376 Points

What is wrong with my media query breakpoint code?

I've written the following code intended to change the background color to navy when the screen size exceeds 480px. The code is not working, but I don't see why.

@media only screen and (min-width: 480px) {
  background-color: navy;
}
Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Edited for markdown.

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

James;

You are missing the element that gets assigned a navy background. Since the challenge is asking for the body to have a navy background the code would be:

// Course: HOW TO MAKE A WEBSITE
// Module: Responsive Web Design and Testing
// Challenge: Write CSS Media Queries
// Task : 1 - Navy Background

@media screen and (min-width: 480px) {
  body {background-color: navy;
  }
}

Happy coding,

Ken

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

The challenge asks you to set the body background color. Keep in mind that selectors within a media query are nested.