I am experiencing an issue with the bootstrap grid columns on my site not having equal heights. The problem arises when a product name contains a long text, causing height discrepancies among the columns. Despite trying to fix the height issue by adding two additional CSS styles, they did not work as expected.
The CSS I added is:
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
Below is the link to my live page where you can see the column height problem in action.
Here is the current HTML div structure:
<div class="row ">
<div id="equalheight">
<div class="col-sm-6 col-md-4 wow fadeInUp demo">
<div class="products ">
</div>
</div>
</div>
</div>