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 Adjusting the Layout with Media Queries

Posted by Stephanie Youstra
Stephanie Youstra
18,513 Points

@media queries don't indent in workspace?

Minor question, but kind of annoying ....

Throughout workspaces, it's always automatically indented as necessary. However, whenever I do a media query, it does NOT. I'm keying it in in the exact same sequence as the demonstration (and as I've done all the previous courses), but for some reason, it wants to align "Then" portion of the "If-Then" query with the left margin.

So, for example, in the segment below ... I've had to manually indent the two class definitions.

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
  }
}

Anyone able to figure out why/what I'm missing? THANKS!!!

2 Answers

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

normally there is a @media all/screen/print and (condition here)

It looks like there editor looks for the all/screen/print part first and considers the selector and condition not defined yet so it doesn't parse it as an open bracket yet.

I suggest you use @media screen and (condition here) you'll notice right away the editor tabs correctly. If your worried about not targeting the right screen then leaving it blank means all so just explicitly say all.

Example:

@media all and (max-width: 680px) {
    /* It should indent to here now */
    .test {
        /* should auto indent with a nested selector too */
    }
}
Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Stephanie, I'm getting the same thing, so I can suggest you contact support, and let them know about the issue.

Syntax highlighting was fixed in your post.