I came across a similar thread discussing my issue, where the suggested solution was to set a fixed height. However, this approach is causing some problems with the responsiveness of the theme I am using. Let me provide more details.
The theme I am working with is from Prestashop and can be viewed here. The demo images in this theme are taller at 395 x 468px compared to my product images which are around 355 x 240px. Due to this difference in heights, random empty spaces are appearing between the images. To address this issue, I made some adjustments which have resulted in the following layout:
https://i.sstatic.net/aSqmg.jpg
To temporarily fix this problem, I enforced a height of 400px on the
<div class="product-container"><li class="ajax_block_product>ul.product_list.grid > li .product-container {
position: relative;
height: 400px;
}
Unfortunately, this solution has impacted the overall responsiveness of the theme. In various screen views such as tablets, mobile devices, or other screens, the fixed height of 400px either falls short or results in excessive spacing between divs vertically. As a temporary workaround, I implemented different heights (300px, 380px, 420px) using @media rules for product-container. However, I acknowledge that this method is not ideal and there may be a better alternative that I am overlooking. I would greatly appreciate any suggestions or solutions you may have!