Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media Queries – NEED HELP Reply To: Media Queries – NEED HELP

#150731
dzinr38
Participant

I have tried quite a few things. Here is what I have. I do have the device width meta tag, but let me know if it is incorrect, since I have so many devices that need to work with the site. I’m also including all the media queries. If you can provide me some help, I would appreciate it. There are supposedly two sizes for Windows tablets, so that’s where there are a few media queries for that device in landscape and portrait. I’ve used media queries for awhile now, but never had to include this many devices. I’m trying to find a way to make this work across all. Thank you for any help you can provide.

META IN HEAD:

/* desktop */ @media (max-width: 979px)

/* iPad in portrait———– */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

/Ipad Resolution Starts Here – landscape/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)

/* desktop and Nexus 10 */

@media (min-width: 1200px)

/* For Android and Nexus */

@media only screen and (min-width: 1200px) and (max-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

/* for Nexus 10 portrait */ @media only screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)

/* for iPhone 4 portrait*/

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

/* for iPhone 4 landscape – affecting Windows phone landscape*/

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)

/* For Windows Tablets2 – Landscape – NEW */ @media only screen and (min-width:1200px) and (max-width:1280px) and (orientation: landscape)

/* For Windows Tablets1 – Portrait – NEW */ @media screen and (min-width:768px) and (max-width:768px) and (orientation: portrait)

/* For Windows Tablets2 – Portrait – NEW */ @media screen and (min-width:720px) and (max-width:720px) and (orientation: portrait)

/* For Windows Phones – Portrait – NEW */ @media screen and (max-width:400px) and (orientation: portrait)

/* Windows Phone landscape */ @media screen and (max-width:480px) and (orientation: landscape)