Return to Snippet

Revision: 67830
at October 31, 2014 02:05 by madebycrunch


Updated Code
.gallery { 
	}
.gallery p.heading {
	}
.gallery .item { 
	float:left;
	display:inline;
	margin:0 1% 15px 1%;
	}
.gallery .item a {
	position:relative;
	display:block;
	}
.gallery .item img {
	display:block;
	overflow:hidden;
	width:100%;
	}
.gallery .item a .overlayicon {
	display:block;
	position:absolute;
	top:0; right:0; bottom:0; left:0;	
	text-align:center;
	}
.gallery .item a .overlayicon i {
	margin-top:22.5%;
	}
		
@media (min-width:768px) {

.gallery .item {
	width:32%;
	}
#mid_col .gallery .item {
	width:49%;
	}
#left_col .gallery .item, 
#right_col .gallery .item {
	width:32%;
	}
#wide_col .gallery .item {
	width:23.5%;
	}
.gallery .item.bookend-left { 
	margin-left:0;
	clear:both;
	}
.gallery .item.bookend-right {
	margin-right:0;
	float:right;
	}
.gallery .item a img {
	}
	
}

@media (max-width:767px) {

.gallery .item {
	width:49%!important;
	}
.gallery .item.odd {
	margin-left:0;
	clear:both;
	}
.gallery .item.even {
	float:right;
	margin-right:0;
	}
.gallery .item.even a {
	}
.gallery .item a img {
	width:100%;	
	}
	
}

Revision: 67829
at October 31, 2014 02:01 by madebycrunch


Initial Code
.gallery { 
	}
.gallery p.heading {
	}
.gallery .item { 
	float:left;
	display:inline;
	margin:0 1% 15px 1%;
	}
.gallery .item a {
	position:relative;
	display:block;
	}
.gallery .item img {
	display:block;
	overflow:hidden;
	width:100%;
	}
.gallery .item a .overlayicon {
	display:block;
	position:absolute;
	top:0; right:0; bottom:0; left:0;	
	text-align:center;
	}
.gallery .item a .overlayicon i {
	margin-top:22.5%;
	}
		
@media (min-width:1024px) {
}
		
@media (min-width:768px) {

.gallery .item {
	width:32%;
	}
#mid_col .gallery .item {
	width:49%;
	}
#left_col .gallery .item, 
#right_col .gallery .item {
	width:32%;
	}
#wide_col .gallery .item {
	width:23.5%;
	}
.gallery .item.bookend-left { 
	margin-left:0;
	clear:both;
	}
.gallery .item.bookend-right {
	margin-right:0;
	float:right;
	}
.gallery .item a img {
	}
	
}
		
@media (min-width:768px) and (max-width:1023px) {
}

@media (max-width:767px) {

.gallery .item {
	width:49%!important;
	}
.gallery .item.odd {
	margin-left:0;
	clear:both;
	}
.gallery .item.even {
	float:right;
	margin-right:0;
	}
.gallery .item.even a {
	}
.gallery .item a img {
	width:100%;	
	}
	
}

@media (min-width:480px) and (max-width:767px) {
}

Initial URL


Initial Description
CSS - Page Component - Gallery

Initial Title
CSS - Page Component - Gallery

Initial Tags


Initial Language
CSS