Adjust product list in woocommerce to stay aligned correctly

Question

Adjust product list in woocommerce to stay aligned correctly

Navigation

#1 by (1 votes)

1

My store has the following visual

And I'd like to align the products correctly because the look is not legal.

How could I do this?

html css layout-responsivo layout woocommerce

asked by anonymous 16.04.2018 / 19:49

1 answer

How to generate random numbers starting from 00000 to 99999 without repeating using MySQL only [closed] How to show and hide element according to scroll?

score 1 · Accepted Answer

James most likely your Grid is based on Floats so it's crashing.

Summarizing roughly, when the elements do not have the same height (in their case when each product has a text size) the fitting of the elements one below the other is not right and the layout smash.

I made this example to better understand and see the break and how to correct it. In your case to correct just put the description of all items with the same amount of lines, getting equal height for all.

OBS: I left the comments in the code

body {
    width: 100%;
    height: 100%;
    margin: 0;
}
div {
    width: calc(100% / 3);
    float: left;
    height: 50px; /* todos os itens devem ter a mesma altura  */
    background-color: aquamarine;
    box-sizing: border-box;
    border: 1px solid black;
}
div:nth-child(2) {
    height: 55px; /* esse item com a altura diferente faz seu layout quebrar  */
}

<div>height: 50px;</div>
<div>esse tem altura diferente height: 55px;</div>
<div>height: 50px;</div>

<div>height: 50px;</div>
<div>height: 50px;</div>
<div>height: 50px;</div>