Skip to content

Instantly share code, notes, and snippets.

@daigofuji

daigofuji/landscape.html

Created April 12, 2012 01:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save daigofuji/2364126 to your computer and use it in GitHub Desktop.
Save daigofuji/2364126 to your computer and use it in GitHub Desktop.
Download ZIP
Super simple css for “Hey, turn your phone around and you can see this better!” notification for mobile devices.
Raw
landscape.html
<html>
<head>
<style type="text/css">
#g-landscape {display:none; margin:0 auto;font-family: sans-serif; font-size:10px;}
@media only screen and (max-device-width: 800px) and (orientation:portrait) {
#g-landscape {display:block;}
}
</style>
</head>
<body>
<div id="g-landscape"><img src="img/turn.png" alt="" align="left" /> For a better viewing experience,<br/>turn the device into landscape mode</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment