Setting your product blocks to equal heights in each row

I started this post by writing “getting your ducks in a row” as the old adage goes, but that does not really explain what I’m going on about now does it? There are NO ducks here!

I’m talking about product blocks being equal in height

Well, recently I was working on a clients handmade greeting card website, applying a new responsive template with a fresh new look. I was trying to make sure all the products in their Magento store would nicely line up vertically on each row without any stray CSS floaters on each category page.

Ordinarily on a simple product, with an image, a title and a price this can be quite easy handled with a little CSS for block positioning and minimum heights.

However, when you factor in elements that are not always consistent on each product (especially on sophisticated platforms like Magento), like:

  • Reviews
  • Sale prices
  • Special prices
  • Configurable options
  • Configurable colours
  • Long product titles
  • Varying short descriptions

It can play havoc with your nicely positioned category page. Plus I must consider keeping my layouts fluid and responsive for the wide array of handheld devices.

There must be an easy way  to handle the heights via CSS

I had tried a series of options using inline-blocks and table-cells that I thought should solve the problem easily, but when I applied this to the demo site, many of the blocks were floating all over the place, as one product had all the available elements where the others did not.

Most of the product blocks required different heights and when viewing on a smaller viewport size, the end of the row product block would naturally move to the following row.

Summoned my best friend Google for easy CSS solutions.

I knew I could reposition or resize each block container via JavaScript or jQuery, but I was (at the time) insistent on a CSS solution to my problem.

After trying several ideas discussed on various CSS tips sites, I found this fantastic article on CSS-Tricks.com by Chris Coyier called Equal height blocks in Rows.

EUREKA! resizing solutions were in sight…

Many of the contributors to the post added their suggestions, plugins they had used. Most of them would not work effectively in my clients Magento store, apart from the one posted by Sam (#603909) which he posted on Github here.

It required several minor modifications to meet our needs, that we integrated in-line into the following Magento template:

app\design\frontend\default\your-theme\template\catalog\product\list.phtml

 

Worked like a charm resizing the blocks after the DOM loaded

Whilst it worked perfectly, I was hoping for a CSS solution to avoid any extra JavaScript. Unfortunately it seems that it was unavoidable and this jQuery plugin was the best solution.

It calculates the height of all the HTML blocks in a given row, looks for the tallest one and then set’s all the others in that row to match it.

What about WordPress and WooCommerce?

Oh WordPress, I could not forget you! The same solution could work perfectly well for Woocommerce, though it does not offer all the extra functionality that Magento does. Unless of course you have additional plugins to create most of these features or maybe the product titles vary greatly and you want the category pages looking sharp!

Whatever the need, Sam’s jQuery plugin could be called in your themes functions.php file and also called in (for example):

yourtheme/woocommerce/templates/content-product_cat.php

and invoke it on the class ‘li .product’ with:

$('.product').responsiveEqualHeightGrid();

 

Thought I’d share as it’s a useful resource

It makes life easier and when time is against you and your looking for quick and effective solution. If there is a better one, let me know I would love to know!

Scroll to Top