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 Selectors Selectors - Beyond the Basics DRY CSS

Posted by Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

@media (wrong) {?}

I'm just curious - why the @media's min-width shows as "bad css" & with a red color in the workspace? Yet it still works just fine... am I missing something here?

Luke Pettway
Luke Pettway
16,593 Points

Could you post an example of the code in question? Thanks.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Hi Luke, if you watch the video you can see it at 9:39

But here's a screenshot from my workspace: red media

3 Answers

Justin Molyneaux
Justin Molyneaux
13,329 Points

If you add the word "all" after @media, then Workspaces won't show the red color "bad css" indicator anymore. I believe that Workspaces is trying to remind us to add a value after the @media query. "all" is the default media type and works for all digital devices. Fortunately, since it is the default media type you can leave it out and the code still works as expected.

Here's the code, I used and it works fine: 

@media all (min-width: 769px) {
  .inln {
  width: auto;
  display: inline-block;
  }
}
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Hey Justin,

I never had problem with the code I was just wondering as why it was shown this way and not explained by Guil. Thank you for your answer.

Konrad Pilch
Konrad Pilch
2,435 Points

Didn't know about this, nice.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Add screen after @media.

Konrad Pilch
Konrad Pilch
2,435 Points

Check out this

Luke Pettway
Luke Pettway
16,593 Points

Screen itself isn't required, as there are instances where you might load something in a window (iframe, embeded browser) and so you might want to style it based on window pixels and not device screen size.

Konrad Pilch
Konrad Pilch
2,435 Points

Well, ture, i just reffer to the CSS Tricks but maybe workspaces look at it as not 100% right i dont know. Still could try it.

Luke Pettway
Luke Pettway
16,593 Points

Yeah chances are it is a false positive :)

Konrad Pilch
Konrad Pilch
2,435 Points

Maybe the best answer would be to try refreshing the workspace lol maybe itll change.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

It's not something that I have in my workspace, Guil has the same, but he doesn't seem to mention anything about it. So I guess this is a "bug" in workspaces?

Thanks for the link by the way, I will check it out.

Konrad Pilch
Konrad Pilch
2,435 Points

Heh ha, you could tell us that earlier :D

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

I did! I told you to watch the video at 9:39

Konrad Pilch
Konrad Pilch
2,435 Points

I understood is as to watch of what is he doing and compare it to your code which i tried to look out form my self.

But thats a good point! Every case is different, Next time ill have a look :)

Kirill Babkin
Kirill Babkin
19,940 Points
Kirill Babkin
Kirill Babkin
19,940 Points

Hello, i think Nick Pettit in one of the lectures on responsive layout said that this "red-wrong-identification" is just a well known work-space "bug".