iPad landscape doesn't show Desktop styles

[beanmatt]

I apologize in advance for this being so simple…but I’ve searched for hours and can’t find a solution.

I have a stylesheet that is set up as follows:

/* Desktop styles 1000px and above /
@media only screen and (max-width: 999px) { / Styles / }
@media only screen and (max-width: 844px) { / Styles */ }

This works as I expected/want on desktop browsers, Android tablets portrait and landscape, and iPad portrait. However, when I turn iPad to landscape, it does not switch to the “1000+” styles.

I tried adding “and (orientation: landscape)” to the media queries, and while this worked for iPad and Android, it stopped working on desktop browsers.

I realize this is probably simple but I can’t get it to work and can’t find anything else out there where someone has had the same problem.

Any help would be appreciated!

[Paulie_D]

Tough to tell without an actual live link to look at.

Do you have the right <meta> tag?

Also these might be helpful.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[magicspon]

This isn’t right

    /* Desktop styles 1000px and above / 
    @media only screen and (max-width: 999px) { / Styles / } 
    @media only screen and (max-width: 844px) { / Styles */ }   

Those declarations will style up to 944px and 844px respectively.

If your viewport is 1000px or more any styles in: @media only screen and (max-width: 999px) { / Styles / } aren’t going to be applied

[Author]

Posts