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 Child, Adjacent, and General Sibling Combinators

Posted by Ary de Oliveira
Ary de Oliveira
28,298 Points

Syntax Definition Command

/* Media Queries -------------------- */

@media (max-width: 768px) { #container { width: 92%; } }

Why Command (max-width: 768px) { appears in red in Selectors.css worksheet in video? It has some meaning? Guil
Please

Ary de Oliveira. From Perth Australia.

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

The reason the max-width media query is highlighted, is because its an text editor guide to highlight the size of the media query. It's just a text editor tool.

Paul Cox
Paul Cox
12,671 Points
Paul Cox
Paul Cox
12,671 Points

I'd say it's actually a bug in workspaces being unable to parse media queries correctly. You can see this as it no longer indents correctly inside the media query.

The error also disappears if you extend the media query rule so that it tests 2 media features. For example

@media screen and (max-width: 768px) { 
  #container { 
    width: 92%;
  }
}