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

Wanted to note that the all media type doesn't take effect in my project

For at least 30mins I searched for a mistake in my syntax, but it turns out that the all media type didn't work. Before:

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

@media all (max-width: 480px) {
  body {
    background: darkred;
  }
}

After:

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

@media (max-width: 480px) {
  body {
    background: darkred;
  }
}

Anyone has the same issue? Or perhaps I have overlooked something.

5 Answers

Boban Talevski
Boban Talevski
24,793 Points

When using all, you also need to add "and" (without quotes) for the media query to work. Otherwise, it's ignored. It's because all is an argument and whatever is in the parenthesis is also an argument and you need to concatenate them somehow to make sense (using "and" in this case).

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

It also makes those red highlighted errors go away in workspaces.

Thomas Wood
Thomas Wood
5,313 Points

I've deleted my comment as it was wrong. Concatenation of media queries is clearly documented under 'Creating complex media queries' on MDN. Thank you Boban for leaving this answer - really helpful.

Jordan Adedeji
Jordan Adedeji
6,977 Points

Thanks soo much for this. I was beginning to go crazy!

Alex Franklin
Alex Franklin
12,397 Points

^^^^^^^^^^^ 100% what Laura Owens said. I was SO motivated at the beginning of this and these small things keep being left out or something we do is out of date and it's simply not creating a positive or enjoyable learning experience.

Andrey Misikhin
Andrey Misikhin
16,529 Points

Your second variant works.

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

@media (max-width: 480px) {
  body {
    background: darkred;
  }
}

Yes, I've already noted, I just wanted to say it and perhaps have had others the same issue :)

Aurelian Spodarec
Aurelian Spodarec
10,789 Points

Swap the order of them. Starting from the smallest first. Tell me if that works.

You need to put this inside head element in HTML file

<meta name="viewport" content="width=device-width, initial-scale=1">

More information: CSS-tricks.com/probably-use-initial-scale1

Scott Junner
Scott Junner
9,010 Points

jume, tried your suggestion, didn't work. OP's suggestion works.

I've wasted so much time trying to fix errors presented in these tutorials. It's driving me crazy at this point. Why wasn't that code already included in our HTML file? This tutorial has been out for several years.

Please fix this issue so future students won't waste so much time trying to figure out what they did wrong. If you don't want to add the code to the HTML file you provide us with, please at least add a comment within the Teacher's Notes.