Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

@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

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 */
    }
}

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.