HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

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

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 =(

Justin Goldby
Justin Goldby
Full Stack JavaScript Techdegree Student 12,741 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

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! =)