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 trialRyan Decker
3,451 PointsMedia Queries
What do I need to do for media queries to work?
When I add something like:
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
nothing happens.
Keep in mind I don't have anything added in my HTML head tag.
5 Answers
Marcus Parsons
15,719 PointsRyan is correct about min and max width.
Also, Ryan, you should add the following meta tag to your HTML in the head area just for more mobile device compatibility since it seems that is kind of what you are targeting (For far better information on what this does for your page than I could possibly tell you, see this post from the MDN: Viewport Meta Tag):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But I actually have a different theory as to why you can't see that media query in action, and I believe it has to do with the browser window and your resolution. I have the "Window Resizer" extension enabled on my Chrome browser, and it allows me to see what the current width x height the page is at. Now, I use a 1920 x 1080 TV that is hooked up through HDMI to my 1366 x 768 Laptop. On neither of these screens can I go below about 465 pixels when re-sizing my window. I'm willing to bet that you are running into the same problem.
If you're using Chrome, though, you can open up the Developer Tools and then click on the little mobile icon on the far left which is right beside the magnifying glass. This will bring up a responsive layout tester where you can put your page into different dimensions without having to re-size the window. You can pick from preset devices and see their resolutions or you can set your own custom resolution. Now, you will be able to see the media query in action.
But, I also have to wonder why you would ever in the world want a media query to execute at that small of a width or smaller? The bare minimum width I've seen for a mobile device is 320px.
Joakim Halvardsson
2,406 PointsAre you sure you've linked the css after any other css-files? That code is correct and should apply a lightblue color to browsers over 300 pixels.
Ryan Decker
3,451 PointsYes. I only have 1 CSS file. And it works properly.
Wouldn't the media query effect screens 300px and under?
Joakim Halvardsson
2,406 PointsSorry, I read min-width, not max-width.
Have you tried changing anything else than the background color?
Ryan Decker
3,451 PointsYep. Font size, background size, and color.
Here's the HTML
<body>
<h1> I should be red on a viewport 300px and below. </h1>
<div id="box">
<h3> This is some text about some things</h3>
</div>
</body>
</html>
heres the CSS
#box {width: 80%;
height: 400px;
background: url('../img/planet.jpg') no-repeat center tomato;
background-size: cover;
margin: 30px auto;
padding: 30px;
background-clip: padding-box;
border: 10px solid tomato;
border-radius: 20px;
}
h3 {color: white;
position: relative;
top: 50px;
left: 150px;}
}
@media screen and (max-width: 300px) {
h1 {font-size: 3em;
color:red;}
}
}
Ryan Decker
3,451 PointsMarcus Parsons calling on your infinite wisdom!
Weng Cheong Sin
Courses Plus Student 2,108 PointsIf you want the media query effect screens at 300px and under, you should change your code to ``` @media screen and (min-width: 300px)
not max-width
Ryan Decker
3,451 PointsWith media queries:
Max width will apply styling to screens below the specified value.
Min width will apply styling to screens above the specified value.
Ryan Decker
3,451 PointsMarcus,
Thanks as always for The great answer.
I had that small media query for testing purposes.
Marcus Parsons
15,719 PointsI'm glad I could help you solve this problem, Ryan. As I said, anytime you need help, I'm just a tag away, good sir! haha Also, if you want to mark an answer as Best Answer, we can close this particular thread out. :)