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

Jordan Heathcoat
Jordan Heathcoat
7,385 Points
Posted by Jordan Heathcoat
Jordan Heathcoat
7,385 Points

Trouble with Device-Specific Media Queries

I'm watching Part 1 of Device Specific Media Queries and working along with the project files in workspaces.

When I tried to set the "max-device-width" workspace highlighted it in red indicating an error, and it did the same thing to "orientation: portrait". After quadruple checking everything I tried saving and seeing if it would work anyway - it didn't in either case. What am I doing wrong?

I have the meta tag directly above the stylesheet links in index.html 

<meta name="viewport" content="width=device-width">

And I've tried both of these in style.css and neither works

@media screen and (orientation: portrait) {
  .body {
    background: red;
  }
}

and 

@media screen and (max-device-width: 479px) {
  .comments {
    display: none;
  }
}

3 Answers

Vincent Wong
Vincent Wong
3,330 Points
Vincent Wong
Vincent Wong
3,330 Points

Not sure if this helps but instead of (max-device-width: 479px), try (min-width:479px) instead?

(Sorry for the format but I'm not too sure how to show code as colourful as you have!)

David Wilkinson
David Wilkinson
9,716 Points
David Wilkinson
David Wilkinson
9,716 Points

You're almost there, but you don't need the "-device-" in the width. You just need "max-width", "min-width", etc...