Setting all product containers to equal heights?

-- url of the page with the problem -- : audleymotors.smsidat.com/accessories/product/listing
-- HikaShop version -- : 2.2
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.3
-- Browser(s) name and version -- : Chrome 28

Hi,

I'm trying to figure out how to ensure each container in the row is of equal height on the product listing page - so every container should automatically resize to the size of the largest container in the row. I've played around with display:table and display:table-row but having no luck. Is this something where jquery is required? Or is there a simpler solution in the hikashop settings?

I've linked to the page so you can see that certain containers are larger since there is more content in them, but I want the others to resize to the size of the largest one.

Any help appreciated, thanks.

Hi,

I think that you can do it with some CSS customization like :

Hi,

You can solve that in part with some css.
Add the following properties in the css file:
www.hikashop.com/support/documentation/1...ize-the-display.html

Mohamed your solution does work, however I don't want them to be a fixed height, just the height of the tallest one.. I guess I'd need javascript for this, any thoughts?

Hi,

Yes you can use a script in order to get the height of all elements (" .hikashop_container ") in the page, get the highest and so, change the height of all other elements.
If you have jQuery in your template it will be easier for scripting it because you can make a "each" on a HTML selector (so all ".hikashop_container"').

Regards,