CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,588 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?

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

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,588 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,185 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,588 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,434 Points

Didn't know about this, nice.

Konrad Pilch
Konrad Pilch
2,434 Points

Add screen after @media.

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,434 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.

Yeah chances are it is a false positive :)

Konrad Pilch
Konrad Pilch
2,434 Points

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

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,588 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,434 Points

Heh ha, you could tell us that earlier :D

Konrad Pilch
Konrad Pilch
2,434 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

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".