-
-
Save chrisbuttery/3127209 to your computer and use it in GitHub Desktop.
MQs just to target smart phones
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- make sure you have this meta tag in your html --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style type="text/css"> | |
| /* General styles */ | |
| #body { | |
| margin: 0 auto; | |
| width: 960px; | |
| } | |
| .header { | |
| background: red; | |
| color: white; | |
| display: block; | |
| font-size: 13px; | |
| } | |
| /* Smartphones (portrait and landscape) ----------- */ | |
| @media only screen and (min-width : 320px) and (max-width : 480px) { | |
| /* Styles */ | |
| body { | |
| background: red; | |
| } | |
| #body { | |
| width: 90%; | |
| } | |
| .header { | |
| background: blue; | |
| color: yellow; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <div class="header"> | |
| <h1>Header</h1> | |
| </div> | |
| <div class="content"> | |
| <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment