Reply To: Equal Height for Products / Older Code Provider > No Longer Work after Update

This was the original code with the borders in place as well, which is not really the import part. The critical part is the function of how this simple css code works globally to keep a clean block size height.

As many many sites will need this as a standard to be 100% honest. Do a quick Google search and you will see it’s fairly vital, many themes have this already built in or as a toggle feature as most merchants have varying product height with no easy way to control this, as it’s do to product being sold.

/*store product grid items*/
.products .product-grid-item
{
	display: block;
	position: relative;
	width: 100%;
}
.products .product-grid-item .product-element-top
{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.products .product-grid-item IMG
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}
.products .product-grid-item IMG
{
	display: block;
	width: 100%;
	max-height: 100%;
}

Please advise and thank you again for your efforts.