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
Kevin Casimer
688 PointsWhy 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>
Robert Richey
Courses Plus Student 16,352 PointsThe only questions that come to mind are:
- is
responsive.csslocated in the css folder? - are you by chance using IE 8? media queries are broken for that browser
Kevin Casimer
688 PointsRobert 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
26,676 PointsHi 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!
Robert Richey
Courses Plus Student 16,352 PointsHi 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
26,676 PointsTry it on a mobile device, it shouldn't work as desktops respond to media queries differently.
Merritt Lawrenson
13,477 PointsI copied your code and it worked fine - the page switches between a blue and green background. What browser are you using?
Gavin Ralston
28,770 PointsLooks 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.
Kevin Casimer
688 PointsThanks for taking a look and the quick response. Each file is saved though, must be something else.
Gavin Ralston
28,770 PointsWhen 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?
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsHi 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!