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

Posted by Sonia Feldman
Sonia Feldman
3,873 Points

Media Query "All" Default Problem

Guil says in the video that the default setting for the @media command in line 202 is "all," and therefore that omitting to write the "all" will make no difference when we preview the website. However, I have found that when the "all" is absent, everything turns blue as planned, but when the "all" is present, the changes fail to take effect. Why is this?

6 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Hi Sonia -

I've often found the syntax for CSS media queries to be a bit clunky and not very intuitive. Guil is correct in saying that the "all" keyword is the default media type. The reason your code block isn't rendering when you use the "all" keyword is because the media type is treated as a separate argument from your other limiters (such as width or orientation) and thus needs to be used in conjunction with the logical "and" operator as in the follow:

@media all and (max-width: 960px) { 
    body { background: royalblue; }
}

Hope that clears things up a bit :D

Sonia Feldman
Sonia Feldman
3,873 Points
Sonia Feldman
Sonia Feldman
3,873 Points

Just curious to better understand the way the code is operating when it is doing something I don't expect it to.

Heather Woods
Heather Woods
5,330 Points
Heather Woods
Heather Woods
5,330 Points

can we see an example of your code please?

Sonia Feldman
Sonia Feldman
3,873 Points
Sonia Feldman
Sonia Feldman
3,873 Points

Working:

@media (max-width: 960px) { body { background: royalblue; }

}

Not Working:

@media all (max-width: 960px) { body { background: royalblue; }

}

Heather Woods
Heather Woods
5,330 Points
Heather Woods
Heather Woods
5,330 Points

I've found that sometimes the instructors show us something so we can see how it used to be done before telling us that the method is now obsolete. perhaps so we have a mental building block to cover all the bases. Wish I could help.

Heather Woods
Heather Woods
5,330 Points
Heather Woods
Heather Woods
5,330 Points

I'm not really sure why including all doesn't work but Guil says all is a default of @media. Why do you feel it's necessary to include all if it works without it? the point of specifying a max and min width is to target specific sized screens to accommodate tablet, mobile and desktops anyway.