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

HTML

Posted by Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

my media queries for landscape mode is being applied to my desktop browser css. How can I prevent this?

I am trying to set 2 media queries, one for mobile landscape mode and the other for desktop browsers. My Mobile phone landscape mode query is: '''@media screen and (orientation:landscape) and (max-device-width: 700px) '''

and it comes after my desktop media query which is " '''@media (min-width: 1000px)'''

I can't set a padding value to 5em on my desktop because the padding is .5em on my mobile landscape media query.... Is there a way to limit certain queries to only work on mobile devices? Or what should I do? Thanks!

1 Answer

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

I'm wondering what the browser thinks the desktop device width is, if it's applying the mobile settings.

But you could try placing the desktop media query below the mobile one, so the rules in it can override the mobile when the conditions apply.