Skip to content

Instantly share code, notes, and snippets.

@kevboutin
Last active December 19, 2015 01:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kevboutin/5877246 to your computer and use it in GitHub Desktop.
An example of how to handle the display of multiple products/items on a page in reponsive grid system. The media queries are not really required but they are there in case other things on the page will interact responsively.
<!DOCTYPE html>
<html>
<head>
<title>Product Shopping View Example</title>
<style>
/*
Original idea:
http://www.barrelny.com/blog/text-align-justify-and-rwd/
http://codepen.io/patrickkunka/pen/GECBF
*/
body {
}
p {
color: #233;
font-family: Helvetica Neue, sans-serif;
padding: .8em;
}
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
.grid {
margin-bottom: 40px;
text-align: justify;
font-size: 12px;
}
.grid li {
padding-top: 10px;
display: inline-block;
background: #eee;
width: 200px;
margin-bottom: 2.5%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid rgba(40,40,40,0.2);
-webkit-box-shadow: 1px 1px 1px 1px rgba(20,20,20,0.9);
-moz-box-shadow: 1px 1px 1px 1px rgba(20,20,20,0.9);
box-shadow: 1px 1px 1px 1px rgba(20,20,20,0.9);
-webkit-transition-property: background, top, -webkit-box-shadow;
-webkit-transition-duration: 0.4s, 0.5s, 0.4s;
-webkit-timing-function: ease-out, ease-out, ease-in;
-moz-transition-property: background, top, -moz-box-shadow;
-moz-transition-duration: 0.4s, 0.5s, 0.4s;
-moz-timing-function: ease-out, ease-out, ease-in;
}
.grid li:hover {
-webkit-box-shadow: 0 0 20px rgba(118,224,184,1);
-moz-box-shadow: 0 0 20px rgba(118,174,184,1);
box-shadow: 0 0 20px rgba(118,174,184,1);
}
.grid img {
width: 200px;
height: 220px;
}
.grid:after {
content: '';
display: inline-block;
width: 100%;
}
.grid .placeholder {
padding: 0;
margin: 0;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 9 COL (205 additional pixels with each added column) */
@media (max-width: 2062px) {
.content {
background-color: #aaa;
}
}
/* 8 COL */
@media (max-width: 1857px) {
.content {
background-color: #eee;
}
}
/* 7 COL */
@media (max-width: 1652px) {
.content {
background-color: #ddd;
}
}
/* 6 COL */
@media (max-width: 1447px) {
.content {
background-color: #ccc;
}
}
/* 5 COL */
@media (max-width: 1242px) {
.content {
background-color: #fff;
}
}
/* 4 COL */
@media (max-width: 1037px) {
.content {
background-color: #c1c;
}
}
/* 3 COL */
@media (max-width: 832px) {
.content {
background-color: #cc1;
}
}
/* 2 COL */
@media (max-width: 627px) {
.content {
background-color: #1cc;
}
}
/* SINGLE COL */
@media (max-width: 422px) {
.content {
background-color: #111;
}
}
</style>
</head>
<body>
<div class="content">
<ul class="grid">
<li><img src="img/products/EB0524.jpg"/><p>Product 1</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 2</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 3</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 4</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 5</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 6</p></li>
<li><img src="img/products/EB0524.jpg"/><p>Product 7</p></li>
<!-- The placeholders below are used to fill in empty columns. These should be used when calculations determine the last row will not have as many items as the previous row. Example: If you have 5 products per row but only 8 products, you will only have 3 products on the last row. This will leave bigger gaps between the last 3 products so we must use 2 placeholders to preserve the grid appearance (5-3=2). Keep in mind that 5 products per row will be a variable depending on the width of the parent container and thus the browser (number of columns - products in the last row = number of placeholders to use). We could also cheat and just leave a bunch of empty placeholders at the end here to handle large displays but that would leave some very small empty space at the bottom of the one-column display and it is not semantically correct. -->
<li class="placeholder"></li>
<li class="placeholder"></li>
<li class="placeholder"></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment