Make Product List Columns same Height

[JanetsCloset]

If you go to this page,

 

https://www.janetscloset.com/index.php?id_category=359&controller=category&p=2

 

You will see that the three product columns at the top are mismatched. The middle is longer than the others, how would I get it to display so they're all even? Like maybe have a set height?

 

Or be dynamic and go off the longest one for that row?

[vekia]

you can use this js script:
 

$(document).ready(function(){
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
$('#product_list li').setAllToMaxHeight();
});

[JanetsCloset]

Thanks for the fast reply!

 

That worked, but now my view details button and other things are not at the bottom of the column. 

 

That script extended my column but not the contents to the bottom. How do I do that?

[SebastianS.]

 

you can use this js script:

 

$(document).ready(function(){
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
$('#product_list li').setAllToMaxHeight();
});

That´s exactly what I was looking for. But I have one little question:

Where exactly do I have to put the code in?

Edited January 21, 2015 by SebastianS. (see edit history)

[SebastianS.]

Sorry I did not mention that I´m using Prestashop 1.6.0.11 with default theme.

[vekia]

paste this code to global.js file, located in your theme directory (as far as i remember in /js/ subdirectory)

[SebastianS.]

Thanks for your reply. I just copied it in global.js but there are no changes. My product container are still not equal in height. Unfortunatley I´m on xampp so i cannot provide any url.

Edited January 22, 2015 by SebastianS. (see edit history)

[SebastianS.]

Bevor I tried to get the product container to the same height, i removed the hover effect and the add to cart button like told

 

here

https://www.prestashop.com/forums/topic/328820-removing-ajax-hover/?p=1664611

 

here

https://www.prestashop.com/forums/topic/341852-solved-remove-the-black-contenair-price-when-hover-the-grid-list-product/?p=1724145

 

and here

https://www.prestashop.com/forums/topic/341852-solved-remove-the-black-contenair-price-when-hover-the-grid-list-product/?p=1724797

 

So I only got the "Border-Hover-Effect" left.

 

Is it possible that these changes are causing the problem with the equal heights?

[vekia]

case needs inspection.

share url please

[SebastianS.]

Unfortunately I´m on local. What I have done now is change product_list.css to:

ul.product_list.grid > li .product-container {
    background: white;
    padding: 0;
    position: relative;
	height: 300px; }
@media (min-width: 480px) and (max-width: 767px)	{
	ul.product_list.grid > li .product-container {
	height:auto;[spam-filter]

Could this cause any problems?

I inserted media queries to keep the responsive functionality.

Edited January 22, 2015 by SebastianS. (see edit history)

[enelyme]

On 1/5/2015 at 11:10 PM, vekia said:

you can use this js script:
 

$(document).ready(function(){
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
$('#product_list li').setAllToMaxHeight();
});

THANKS ! REALLY !