Edit Question - KnowledgeHub

Title Body

I have two devices that I'm testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I'm having a really hard time figuring out how to target these individual devices with media queries. I'm not sure about what values to use for max-width or to use max-device-width . Also I can't figure out what order to put the media queries in... According to: http://responsejs.com/labs/dimensions/ Galaxy Nexus Portrait: document.documentElement.clientWidth = 360 Galaxy Nexus Landscape: document.documentElement.clientWidth = 598 Nexus 7 Portrait: document.documentElement.clientWidth = 603 Nexus 7 Landscape: document.documentElement.clientWidth = 966 I need to target the following: Galaxy Nexus Portrait and Tablet Galaxy Nexus Portrait Galaxy Nexus Tablet Nexus 7 Portrait and Tablet Nexus 7 Portrait Nexus 7 Tablet I tried the following for testing but didn't have good results... Not sure what I'm doing wrong. I was kinda just playing around with the numbers trying to figure out what worked and what didn't... /* Galaxy Nexus (portrait and landscape) ----------- */ @media only screen and (min-device-width : 360px) and (max-device-width : 598px) { ul.top-menu { background: red; } } /* Galaxy Nexus (landscape) ----------- */ @media only screen and (min-width : 361px) and (orientation: landscape){ ul.top-menu { background: blue; } } /* Galaxy Nexus (portrait) ----------- */ @media only screen and (max-width : 360px) and (orientation: portrait) { ul.top-menu { background: purple; } } /* Nexus 7 (portrait and landscape) ----------- */ @media only screen and (min-device-width : 603px) and (max-device-width : 966px) { ul.top-menu { background: yellow; } } /*

Tags (comma-separated) Cancel