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:
- 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.
After trying several ideas discussed on various CSS tips sites, I found this fantastic article on CSS-Tricks.com by Equal height blocks in Rows.called
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:
Worked like a charm resizing the blocks after the DOM loaded
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):
and invoke it on the class ‘li .product’ with:
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!