Media query to target ipad vertical layout
Trying to control a particular layout when orienting the iPad vertically was driving me insane… until I found this sweet query to tackle it:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
// Styles
// Styles End
}
I had tried different cominations, but what really made it was the “orientation: portrait”. Same thing works for the landscape orientation. The only difference is that the “orientation” should be set to “landscape”.
While ideally the layout should just fall into to place without having to specify rules for one or another orientation, there are sometimes instances (particularly when dealing with multiple columns) that being able to target a specific orientation is crucial.
So always thing twice (I mean 3 times!!) any specific styles you want to place in this query. I can tell you that it will hit you back when making changes to the design. On the other hand if handled carefully you can get a lot from them.
The credit for this query and many more is to Stuff and Nonsense who posted them on the Hardboiled CSS3 Media Queries article.
