0

I'm having some trouble with a bit of CSS where I'm trying to hide a div when viewed on tablets. The CSS media query for tablets works to handle this task, but unfortunately also catches some devices which are not tablets, such as netbooks. I have tried implementing a separate media query for netbooks but all that ends up happening is the netbook media query combines with the tablet media query and the div is still hidden.

The query I'm using to catch "netbooks" is

@media only screen 
and (min-width : 900px) 
and (max-width : 1160px) {

And the query I'm using to catch tablets is

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

I get that the resolutions overlap, but is there some other query I can use to differentiate the two?

Yes, JS is just fine (got a nice case of tunnel vision and missed it right in front of me :D ) and that link pretty much takes care of it. Thanks!

user2105033
  • 1
  • 3
  • There are many tablets with 1280 res width and even some with 1920 (e.g. Asus Transformer, Kindle Fire HD, and Google Nexus 10 with even higher res). – Fabrício Matté Feb 24 '13 at 18:04
  • If a JS solution is acceptable, it's easier to focus on detecting mobile browsers, rather than trying to distinguish based on screen size: http://stackoverflow.com/a/13805337/1306809 – Matt Coughlin Feb 24 '13 at 21:09

1 Answers1

0

Matt's comment answered the question for me.

user2105033
  • 1
  • 3