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 B.B. Groeneveld
B.B. Groeneveld
2,826 Points

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
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
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
Jordan Adedeji
Jordan Adedeji
6,977 Points

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

Alex Franklin
Alex Franklin
12,403 Points
Alex Franklin
Alex Franklin
12,403 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
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;
  }
}
B.B. Groeneveld
B.B. Groeneveld
2,826 Points

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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

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

jume
jume
2,860 Points
jume
jume
2,860 Points

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
Scott Junner
Scott Junner
9,010 Points

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

Laura Owens
Laura Owens
15,044 Points

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.