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

Posted by Ben Goldman
Ben Goldman
14,626 Points

Issue with Landscape Orientation

I have been programming with Brackets text editor. I have noticed that when I write media queries, the "-webkit-min-device-pixel-ratio: 2" and "orientation" specifications are displayed in red in my editor. After testing them, it doesn't appear that they are working. Does anyone know anything about this? I can't figure out if it's my code or my editor.

It doesn't accept either portrait or landscape orientation, btw.

This is one of the queries I wrote:

@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

         Of course, this is where I would put my css {

          }

}

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Try using the CSS3 Media Queries Test site, in combination with Chrome's Device Mode & Mobile Emulation.

I found that your media query would satisfy the criteria if you also included the Responsive Meta Tag that is widely used in responsive sites these days:

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