Skip to content

Instantly share code, notes, and snippets.

@bencooling

bencooling/CSS orientation classes

Created January 4, 2012 01:48
Show Gist options
  • Save bencooling/1558007 to your computer and use it in GitHub Desktop.
Save bencooling/1558007 to your computer and use it in GitHub Desktop.
Download ZIP
Adding specific classes based on orientation for mobile devices
Raw
CSS orientation classes
<!DOCTYPE html>
<html>
<!-- http://www.ajaxbestiary.com/2011/12/19/css-and-mobile-device-orientation/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+AjaxBestiary+%28Ajax+Bestiary%29 -->
<!-- @see bcooling.com.au/testbed/orientation.html-->
<head>
<style>
html, body {
height:100%; min-height:100%; margin:0; padding:0;
}
.landscape, .portrait {
text-align:center; height: 100%; color: white;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; font-size:10em;
}
.landscape {
background-color:green;
}
.portrait {
background-color:blue;
}
@media only screen and (orientation: landscape) {
.portrait { display: none }
}
@media only screen and (orientation: portrait) {
.landscape { display: none }
}
</style>
</head>
<body>
<div class="landscape">
Visible Only in Landscape
</div>
<div class="portrait">
Visible Only in Portrait
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment