Skip to content

Instantly share code, notes, and snippets.

@davidhariri

davidhariri/responsive-grid.html

Created September 14, 2015 15:55
Show Gist options
  • Save davidhariri/2fb178765bc45287cbce to your computer and use it in GitHub Desktop.
Save davidhariri/2fb178765bc45287cbce to your computer and use it in GitHub Desktop.
Download ZIP
A simple mobile responsive grid for a Volley answer
Raw
responsive-grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
body {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.hero {
height: 100vh;
width: 50%;
display: inline-block;
float: left;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.content {
padding: 40px;
width : 50%;
height: 100vh;
display: inline-block;
float: left;
overflow-y: scroll;
overflow-x: hidden;
}
.content__block {
padding: 20px;
background-color: grey;
}
.grid {
margin-top: 40px;
position: relative;
width: 100%;
}
.grid__item {
background-color: pink;
position: relative;
padding: 12px;
width: 49%;
float: left;
margin-right: 1%;
margin-bottom: 2%;
}
.grid__item:nth-child(even) {
margin-left: 1%;
margin-right: 0;
background-color: orange;
}
@media only screen and (max-width: 768px) {
.hero {
width: 100%;
height: 220px;
display: block;
float: none;
}
.content {
padding: 16px;
height: auto;
width: 100vw;
display: block;
float: none;
}
.grid__item {
width: 100%;
display: block;
margin-right: 0;
}
.grid__item:nth-child(even) {
margin-left: 0;
}
}
</style>
<body class="page">
<div class="hero" style="background-image:url(https://lh4.ggpht.com/M1XTibfCgpi5pgjSDb7kXDh21N8fpn-8evzQVAX-qGFhSyArDmSuCAv1pjVp4jbAt_g=h900);" alt="kitten"></div>
<div class="content">
<div class="content__block">
<h1>Heading</h1>
<p>
My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph. My really long, awesome paragraph.
</p>
</div>
<div class="grid">
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
</div>
<div class="grid">
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
<div class="grid__item">
<img src="grid__item__icon" alt="an icon" />
<div class="grid__item__content">
<h3>My cool icon thing</h3>
<p>
a paragraph about this icon thing
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment