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

General Discussion

Posted by Ryan Decker
Ryan Decker
3,451 Points

Why are my Media Queries not working in Workspaces?

Trying to add a simple media query. As soon as I start typing max-width (after @media) the "max width" turns red like it is incorrect.

@media (max-width: 768px) { h1:{font-size: 4rem;} }

4 Answers

tootiemcflow
tootiemcflow
5,601 Points
tootiemcflow
tootiemcflow
5,601 Points

Hey Ryan Decker,

There's a semi-colon that's directly after the h1 element selector. Try removing that and seeing if that works.

@media (max-width: 768px) {
  h1 {
    font-size: 4rem;
  }
}
Colin Marshall
Colin Marshall
32,861 Points

You are correct there should be no colon after h1, but the media query highlighting will still look weird in workspaces.

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

Isn't the media supposed to look like this @media screen and (min-width: 480px)

Colin Marshall
Colin Marshall
32,861 Points

The screen part is only necessary if you are targeting only devices with screens with your media query.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Just ignore that. The actual code should still work, despite the fact that it shows up as incorrect syntax in workspaces. Seems like there are a few kinks still to be worked out with the syntax highlighting in workspaces.

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

Ok thank, also why does it state 4rem and not 4em?

Colin Marshall
Colin Marshall
32,861 Points

This is because rem's are a different unit of measurement than em's and the OP chose to use rem's. They are very similar to em's though.

Richard Nicholls
Richard Nicholls
1,301 Points

Thanks, so much to learn!