Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Harrison Greeves
Harrison Greeves
2,920 Points

My window will not change to red when I shrink it to 480px

It will turn blue on the way. I've checked the syntax a few times and everything seems to be in check.

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

  p {
    color: white;
  }
}

@media (max-width: 480px) {
  body {
    background: darkred;
  }
}
Rich Donnellan
Rich Donnellan
25,767 Points

Question updated with code formatting. Check out the Markdown Cheatsheet for syntax examples.

4 Answers

Steven Parker
Steven Parker
217,626 Points

480px is pretty small. I wasn't able to reduce my window enough to try that.

But I changed 480 to 600 and it seemed to work as expected. Are you sure you were testing it on a small enough window? Also consider that a device that small may present a larger "virtual" size to the browser and provide a horizontal scroll capability to see the rest.

UPDATE: I tried "zooming in" and was able to set the window below the breakpoint. That color shifted then as expected.

Rich Donnellan
Rich Donnellan
25,767 Points

:fire: tip, Collin Halliday and Steven Parker:

Enabling dev tools in "your favorite browser" lets you resize the viewport much smaller than you could if dev tools were disabled.

Steven Parker
Steven Parker
217,626 Points

Device simulation in the devtools didn't work, and is what gave me the idea that the simulated device was using a larger virtual width than the actual one (or was just buggy).

Rich Donnellan
Rich Donnellan
25,767 Points

I typically avoid using one of the simulated devices. Keep it "responsive" and manually resize the viewport.

Steven Parker
Steven Parker
217,626 Points

With devtools open or not, manual resizing stopped at 500. But I was able to get it smaller by "zooming in".

Rich Donnellan
Rich Donnellan
25,767 Points

Is your dev tools positioned along the side? That's where you're able to selectively resize just the viewport and not the whole browser window.

Sorry; I should have specified that from the beginning.

Steven Parker
Steven Parker
217,626 Points

I see now, I always have devtools undocked by default.

Collin Halliday
seal-mask
.a{fill-rule:evenodd;}techdegree
Collin Halliday
Full Stack JavaScript Techdegree Student 17,491 Points

Hey Harrison.

I did not look at the challenge or lesson you are on, but I did test your code. It worked fine for me in both the Google Chrome and Firefox browsers. However, it would not work for me on the Safari browser. I believe this is because the Safari browser would not allow me to reduce the width of my window below 504px. Your dark-red media query does not kick in until 480px or lower.

I hope that helps. Best of luck!

Harrison Greeves
Harrison Greeves
2,920 Points

Yeah I think that's my issue. I'm using Opera and the window doesn't seem to shrink as small as it does in the tutorial. I may fiddle around with devtools for a bit to get it working.

Thanks

It works for me if I resize the actual window and don't do it via google dev tools.

here ist my code:

@media all and (max-width: 960px) {
  body {
    background-color: roayalblue;
  }

  p {
    color: white;
  }
}