Problem in product layout in Grid

Question

I have the website MK Graphics where in the part of product category, specifically in Banners and also in Promotions the disposal of the products in Grid is with problem, one or another product appears alone in a certain line, and should continue the standard of 3 products. This can be seen at this link.

And the problem specifically in this image.

I tried using css:

.row, [class*='col-'] {
    display: inline;
}

But it didn’t work, and the strange thing is that the problem only appears in some categories.

I tested on Chrome version 51.0.2704.103 and Firefox.

Answer 1

So Wendell the problem is that you only have columns(col).

Your code today is like this:

...
<div class="product-layout product-grid col-md-4"></div>
<div class="product-layout product-grid col-md-4"></div>
<div class="product-layout product-grid col-md-4"></div>
<div class="product-layout product-grid col-md-4"></div>
<div class="product-layout product-grid col-md-4"></div>
<div class="product-layout product-grid col-md-4"></div>
...

To solve your problem, you should be like this:

...
<div class="row>
     <div class="product-layout product-grid col-md-4"></div>
     <div class="product-layout product-grid col-md-4"></div>
     <div class="product-layout product-grid col-md-4"></div>
</div>
<div class="row>
     <div class="product-layout product-grid col-md-4"></div>
     <div class="product-layout product-grid col-md-4"></div>
     <div class="product-layout product-grid col-md-4"></div>
</div>
...

An alternative solution is via css.
Add a minimum height like this:

.product-layout{min-height: 370px;}

I hope I’ve helped.

Answer 2

If you’re using Bootstrap, don’t forget to use it this way to be responsive:

<div class="product-layout product-grid col-lg-4 col-sm-6"></div>

This div is a column with col-lg-4 the size of it is 4 bootstrap columns for large devices, in Md (notebooks) the same thing, for Sm devices (tablets) and Xs (mobile phones) this column will occupy the space of 6 columns, by default the bootstrap makes use of 12 columns. you can add as many of these Ivs as you want within a div Row (row), when the size pops the sum of 12 columns they will automatically pass down creating another layer. However, if you differentiate the layers with the Rows, the content may not automatically organize.