Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Ryan Decker
Ryan Decker
3,451 Points
Posted by Ryan Decker
Ryan Decker
3,451 Points

Media 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
Marcus Parsons
15,717 Points

Ryan 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
Joakim Halvardsson
2,406 Points
Joakim Halvardsson
Joakim Halvardsson
2,406 Points

Are 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
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Yes. I only have 1 CSS file. And it works properly.

Wouldn't the media query effect screens 300px and under?

Joakim Halvardsson
Joakim Halvardsson
2,406 Points

Sorry, I read min-width, not max-width.

Have you tried changing anything else than the background color?

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Yep. 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
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Marcus Parsons calling on your infinite wisdom!

Weng Cheong Sin
PLUS
Weng Cheong Sin
Courses Plus Student 2,108 Points
Weng Cheong Sin
Weng Cheong Sin
Courses Plus Student 2,108 Points

If 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
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

With 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
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Marcus,

Thanks as always for The great answer.

I had that small media query for testing purposes.

Marcus Parsons
Marcus Parsons
15,717 Points

I'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. :)