Created
April 28, 2016 19:42
-
-
Save tristen/08b955c33415d0075c5bd4064cba7a72 to your computer and use it in GitHub Desktop.
Variable height sidebar
This file contains hidden or 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> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' /> | |
| <link href='site.css' rel='stylesheet' /> | |
| </head> | |
| <body> | |
| <div class='sidebar pin-topleft z1 pad1'> | |
| <div class='sidebar-inner fill-white round lifted'> | |
| <header class='pad2 keyline-bottom'> | |
| <h4>Heading title</h4> | |
| </header> | |
| <div class='pad2'> | |
| Some content goes in here. | |
| </div> | |
| </div> | |
| </div> | |
| <div id='map' class='fill-grey col12 pin-top pin-bottom'></div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| .sidebar { | |
| width:360px; | |
| } | |
| .lifted { box-shadow:0 1px 2px rgba(0,0,0,0.10); } | |
| /* Mobile */ | |
| @media only screen and (max-width:640px) { | |
| .sidebar { | |
| position:absolute; | |
| width:100%; | |
| padding:0; | |
| margin:0; | |
| top:auto; | |
| bottom:0; | |
| height:40%; | |
| z-index:10; | |
| } | |
| .sidebar-inner { | |
| height:100%; | |
| border-radius:0; | |
| } | |
| .sidebar-inner > * { border-radius:0; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment