Responsive Design - orientation

Style sheet selects on screen orientation

by Brian von Konsky

HTML

<div id='wide'> Landscape </div>
<div id='tall'> Portrait  </div>

CSS

/*
Try this:
1. Change the window partition so that the 
   result area is wider than it is tall.
2. Change the window partition so that the
   result area is taller than it is wide.
*/

@media screen and (orientation: landscape) {
    body {background: red;}
    #wide {visibility: visible;}
    #tall {visibility: hidden;}
}
@media screen and (orientation: portrait) {
    body {background: green;}
    #wide {visibility: hidden;}
    #tall {visibility: visible;}
}