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 Adding Breakpoints for Devices

Karel Houf
Karel Houf
3,531 Points
Posted by Karel Houf
Karel Houf
3,531 Points

@media not working =(

Here is my code:

@media screen and (max-width : 480px) { body { background: #000; } }

@media screen and (max-width : 660px) { body { background: #ccc; } }

And here are the links:

<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">

2 Answers

Justin Goldby
seal-mask
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points
Justin Goldby
.a{fill-rule:evenodd;}techdegree
Justin Goldby
Full Stack JavaScript Techdegree Student 12,754 Points

Weird, this worked for me - @media screen and (min-width: 480px) { body { background: navy; } }

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

Maybe make sure the background colors are actual color names and not hex values?

Edit: I just realized you are using hex values for black and gray, do you want these colors to show up? because your code works for me with black and gray hex values as you have chosen.

can you click the little camera button near the preview to take a "snapshot" of your CSS and index.html page so we can see what it looks like? You may be missing something simple. Also make sure the main css is above the responsive one, as that could be meddling with your page -

<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">

Lastly, it shouldn't be that big of a difference but I recommend not using Internet Explorer, as an older version of this may not be compatible with media queries.

Karel Houf
Karel Houf
3,531 Points
Karel Houf
Karel Houf
3,531 Points

So I changed the color back to hex value and its now working =) So no idea what happend, but I'm glad it's working =) Thank you! =)

Karel Houf
Karel Houf
3,531 Points
Karel Houf
Karel Houf
3,531 Points

Well I noticed the problem so fix:

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

@media screen and (min-width: 660px) { body { background: #ccc; } }

but still not working =(