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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Posted by Yi Ren
Yi Ren
4,990 Points

My background color only stays navy. It doesn't change to white when I scale down the browser.

This is the same code that I'm using as the video:

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

The background color changed to navy and it doesn't change to white when I scale it down. Does it have to do with my desktop computer screen's resolution? This code works when I use my mac-book air.

2 Answers

Jude Campbell
PLUS
Jude Campbell
Courses Plus Student 5,746 Points
Jude Campbell
Jude Campbell
Courses Plus Student 5,746 Points

Your code seems to work for me, is there any way you can provide more?

Yi Ren
Yi Ren
4,990 Points

I'm currently using iMac with 5k resolution. I did manage to make it work when I changed the min-width to 580px. So I'm guessing it's because of my screen's resolution? The original code (at 480px)works on my macbook air.

Dennis Le
Dennis Le
12,872 Points
Dennis Le
Dennis Le
12,872 Points

I also had the same problem at first. At first, I tested with Google Chrome...failed, with 480px the screen stayed blue. So I tried it on FireFox Firebug fire...something...it worked...what!...so... I want back to Chrome pressed (Command and zero)...it worked! This will make the view to actual size.