Last active
February 12, 2016 20:32
-
-
Save leanneromak/d9345651b8c47c2521dd to your computer and use it in GitHub Desktop.
hide/show divs on desktop/mobile with CSS
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>hide and show</title> | |
| <style type="text/css"> | |
| #mobile-only { | |
| display:none; | |
| } | |
| @media screen and (max-width: 980px) { | |
| #desktop-only { | |
| display:none; | |
| } | |
| #mobile-only { | |
| display:block !important; | |
| margin-top:100px; | |
| color:red; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="mobile-only"> | |
| <p> This div will be hidden on desktop and show on mobile.</p> | |
| </div> | |
| <div id="desktop-only"> | |
| <p> This div will be hidden on mobile and show on desktop.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment