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

Alex Boyers
Alex Boyers
15,168 Points
Posted by Alex Boyers
Alex Boyers
15,168 Points

Excluding devices in media queries

I am trying to show my website's mobile navigation on iPads to prevent iOS issues with :hover states which I use in my desktop navigation. I have read up a lot on media query syntax and was unable to find a solution.

While messing around, however, I found that this somehow works: 

  /*mobile styles (what I want to use on an iPad)*/

@media (min-width: 750px),
@media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/{

  /*desktop styles (the ones I don't want to use on an iPad)*/
  /*These styles are being ignored when using an iPad*/

}

This doesn't make any sense to me, and I don't think it's a great idea to keep it this way, but I have been unable to find another way to write it.

Could someone explain why this works (using 2 @media statements in a single query causing the second @media statement to actually ignore the styles within) or how to do this correctly?

Alex Boyers
Alex Boyers
15,168 Points
Alex Boyers
Alex Boyers
15,168 Points

It seems this may work on the iPad I am testing with because a second @media statement is not valid and will break the entire query, simply adding that and no other code (like the device-width code) still causes it to ignore these styles. Other devices seem to ignore the error and work around it. The iPad has iOS 8, but is not completely up to date (iOS 8.3) so that may also be part of the issue.

Other iOS devices I have tried this on (an iPhone 4 and 5) seem to ignore the error and work as expected, so it is something exclusive to the iPad, maybe it just needs updated.