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 jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

Media queries, how do you target the horizontal aspect?

Hi,

I've got a failure of understanding that I'm trying to figure out. Thanks to Treehouse I'm now fairly familiar with media queries and working with them but it didn't take long to realise my designs broke when the device used height rather than width. I've seen media queries that include this aspect, rather than having a second query that targets a particular size, but have no idea how to actually use them in a stylesheet. Any thoughts would be appreciated.

Cheers

Jason

2 Answers

John Renzema
John Renzema
9,070 Points
John Renzema
John Renzema
9,070 Points

I am assuming you are working with mobile devices, and are referring to height as landscape mode. Correct my if I'm wrong.

You can always add multiple parameters to the query like below.

Example: @media screen (max-device-width: 1024px) and screen (max-device-height: 780px)

Personally I don't think its needed, but it can be done.

Also why not use orientation? ei. (orientation: landscape )

o

jasonjones5
PLUS
jasonjones5
Courses Plus Student 5,571 Points
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

Hi John, thanks for the response. You're exactly right, I'm talking about landscape, I just didn't put it very well. Your example is actually what I'm talking about. The query lists both width and height and I'm wondering how you target the height aspect. I typically use just the width based queries and would create a second query at 780px to account for someone flipping the device, but if there is a way to do it without creating that second query it seems to make sense to do it - partly so you know exactly what you're working with and partly because it seems slightly more optimial and I'll take any savings I can get.

Cheers