Problem in arrangement of products in Grid

Question

Problem in arrangement of products in Grid

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have the MK Gráfica website where in the product category part, specifically in Banners and also in Promotions, the layout of the products in Grid is in problem, one or another product appears alone in a certain line, and should continue the pattern of 3 products. This can be seen in this link .

And the problem is specifically in this image .

I tried using css:

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

But it did not work, and the strange thing is that the problem only appears in some categories.

I tested Chrome on version 51.0.2704.103 and Firefox.

css css3

asked by anonymous 01.08.2016 / 15:30

2 answers

0

If you're using Bootstrap, be sure to use it 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 its size is 4 bootstrap columns for large devices, in md (notebooks) the same thing, for sm (tablets) and xs (cell) devices this column will occupy the 6-column space, by default the bootstrap makes use of 12 columns. you can add as many divs as you want into a div row, when the size pops up to the sum of 12 columns they will automatically go down creating another layer. But if you differentiate layers with rows, the content may not automatically organize itself.

01.08.2016 / 16:11

C # When you open form 2 wait 5 seconds and open form 3 utf8 correct text how to remove strange characters [duplicate]

score 3 · Accepted Answer

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

Your code looks 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, it should look 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>
...

A workaround is via css.
Add a minimum height like this:

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

I hope I have helped.