Skip to content

Instantly share code, notes, and snippets.

@tristen
Created April 28, 2016 19:42
Show Gist options
  • Save tristen/08b955c33415d0075c5bd4064cba7a72 to your computer and use it in GitHub Desktop.
Save tristen/08b955c33415d0075c5bd4064cba7a72 to your computer and use it in GitHub Desktop.
Variable height sidebar
<!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>
.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