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 CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points
Posted by Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points

@media

@media (max-width: 768px){ body{background-color:green;} }

This is what I've done to make sure @media query is working on my website before set up any more properties and values.

But the color does not change when I adjust the screen size.

Please explain the reason and is this wrong?

Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points
Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points

Hi, Is it not working because I write the media queries on the css document? What's the syntax to add external media query to the HTML page?

7 Answers

Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points
Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points

You are missing the media type. @media screen and (max-width: 768px){ body{background-color:green;} }

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

Can you possibly copy and paste your html and css documents so we have a better idea of what you have written.

Mark Singleton
Mark Singleton
5,182 Points
Mark Singleton
Mark Singleton
5,182 Points

Chrome doesn't seem to display the different media rules when I use '@media all' like Guil says earlier in the video. If i leave it at just '@media' it works. Weird.

Matteo Simeone
Matteo Simeone
13,365 Points
Matteo Simeone
Matteo Simeone
13,365 Points

Hi Mark, maybe you've forgotten to write the "and" keyword between the two "all" and "(max-width: 768px)" arguments.

Hope this helps,

Carlton Whittaker
Carlton Whittaker
1,995 Points
Carlton Whittaker
Carlton Whittaker
1,995 Points

I had the same issue as Mark, I removed (all) and it works. I then added the (all) back to my @media query and it now works fine too.

Mark Singleton
Mark Singleton
5,182 Points
Mark Singleton
Mark Singleton
5,182 Points

I think it's an issue with Workspaces. I've started downloading the project files and working on them in Notepad++ because it gives better, more consistent results. Workspaces is very quirky and buggy.

Carlton Whittaker
Carlton Whittaker
1,995 Points

Thanks for the info. I would also recommend http://www.sublimetext.com/ as an alternative to notepad++ and http://codepen.io/ is very useful for viewing your code in real-time.

Mark Singleton
Mark Singleton
5,182 Points
Mark Singleton
Mark Singleton
5,182 Points

Thanks Carlton, I hadn't heard of Sublime Text before.

Mark Buckingham
Mark Buckingham
5,574 Points
Mark Buckingham
Mark Buckingham
5,574 Points

Hi,

when you use the @media rule you need to specify the media type/device. If you are querying the screen you would need:

@media screen and (max-width: 768px){ body{background-color:green;} }
Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points
Samanthi Sembakuttige
Samanthi Sembakuttige
1,430 Points

Hi, Thanks, but the vedios I watched did not teach me to specify the media type. Let's say I want it for the purpose of screen and print. However I just tried using screen, but it still does not work. what am I doing wrong?

Mark Buckingham
Mark Buckingham
5,574 Points
Mark Buckingham
Mark Buckingham
5,574 Points

Samanthi, you are correct @media by itself should be sufficient for what you want.

In that case I am not sure why yours is not working.