Skip to content

Instantly share code, notes, and snippets.

@secondfret

secondfret/dabblet.css

Created January 17, 2012 16:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save secondfret/1627396 to your computer and use it in GitHub Desktop.
Save secondfret/1627396 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":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment