Skip to content

Instantly share code, notes, and snippets.

@skylamer

skylamer/dabblet.css

Created January 18, 2012 14:16
Show Gist options
  • Save skylamer/1633199 to your computer and use it in GitHub Desktop.
Save skylamer/1633199 to your computer and use it in GitHub Desktop.
Download ZIP
Conquering Borders: The Bane of Responsive Layouts
Raw
dabblet.css
/**
* Conquering Borders: The Bane of Responsive Layouts
*/
#container {
width: 90%;
margin: 20px auto;
}
.column {
width: 16%;
float: left;
margin: 0 2% 20px 2%;
background: #eee;
border: 2px solid #ddd;
padding: 15px;
font-size: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.05);
}
.column:hover {
border: 2px solid #888;
}
/* EXAMPLE MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
.column {width: 21%;}
}
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
.column {width: 29.33333%;}
}
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.column {width: 46%;}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.column {width: 96%;}
.column img {width: 96%;}
.column h3 {font-size: 18px;}
.column p, {font-size: 18px;}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="container">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. </p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. </p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. </p>
</div>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment