Fixed Size for Products on Grid Mode

[itzikzax]

Hi,

I've added a "min-height" of 350px in order to keep the products on a grid mode with the same size box (in case I've a longer title etc.). You can see it here: http://lionweb.com/~lazzari/1610/index.php/lazzari

I have just one problem: I want the buttons add to cart / add to wishlist /add to compare to always show at the bottom of the box. How can I do it?

Thank you for your help.

[david]

Hello,

Just open skin/frontend/default/lazzari/css/styles.css file and jump to line 1721, you will see the following code:

.category-products .products-grid li.item, .mt-products-grid li.item {
background: none repeat scroll 0 0 #FFFFFF;
border: 7px solid #F2F2F2;
margin-left: 15px;
min-height: 350px;
padding: 5px 0 0 !important;
text-align: center;
width: 192px !important;
}

Now just add a new property: position: relative; see the following:

.category-products .products-grid li.item, .mt-products-grid li.item {
background: none repeat scroll 0 0 #FFFFFF;
border: 7px solid #F2F2F2;
margin-left: 15px;
min-height: 350px;
padding: 5px 0 0 !important;
position: relative;
text-align: center;
width: 192px !important;
}

Jump to line 780, replace the following code:

.products-grid .actions {

}

by the following code:

.products-grid .actions {
bottom: 0;
position: absolute;
}

Save and refresh the front-end to see the result.

Cheers!