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

Why won't my media query css work?

I've adjusted min-width from 1px to 5000000px and can't get the background to turn navy. I don't believe there is a problem with the code either.

Here is a plain copy/paste of the CSS:


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

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

and the html in each file:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kevin Casimer | Entrepreneur</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>

Hi Kevin,

I added markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Cheers!

The only questions that come to mind are:

  • is responsive.css located in the css folder?
  • are you by chance using IE 8? media queries are broken for that browser

Robert Richey you nailed it. Responsive.css was listed directly below the css folder but not actually in it.

Thank you everybody <3 !

3 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Kevin,

You appear to missing the viewport meta tag which is required for media queries to take effect, see the below snippet which is the most basic viewport tag.

<meta name="viewport" content="width=device-width">

Happy coding!

Hi Chris,

I can write a web page that uses media queries without a viewport meta tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    @media screen and (max-width: 799px) {
      body { background: blue; }
    }

    @media screen and (min-width: 800px) {
        body { background: red; }
    }
  </style>
</head>
<body>  
</body>
</html>
Chris Shaw
Chris Shaw
26,676 Points

Try it on a mobile device, it shouldn't work as desktops respond to media queries differently.

Merritt Lawrenson
Merritt Lawrenson
13,477 Points

I copied your code and it worked fine - the page switches between a blue and green background. What browser are you using?

Gavin Ralston
Gavin Ralston
28,770 Points

Looks ok at first glance.

If you're using workspaces, make sure you saved both the html page AND the responsive.css file. (Check for those orange dots) and then refresh the page.

Thanks for taking a look and the quick response. Each file is saved though, must be something else.

Gavin Ralston
Gavin Ralston
28,770 Points

When you pasted that html, is that literally all you have in the html document, or were you providing the head for reference?

(Seems a silly question, but without a body element actually on the page, I'm not sure the styling would work)

Maybe a full paste of the html?