1
My store has the following look
And I would like to align the products correctly, because the look is not cool.
How could I do that?
1 answer
1
James most likely his Grid is based on Floats so he is breaking.
To sum up roughly, when the elements don’t have the same height (in your case when each product has a text size) the fitting of the elements one below the other not sure and the layout breaks.
I made this example so you understand better and see the break and how to fix it. In your case to fix just put the description of all items with the same amount of lines, getting the same 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>Browser other questions tagged html css responsive-layout woocommerce layout
You are not signed in. Login or sign up in order to post.
Are you using boostrap? Only with the image it is difficult to help you. The page is already published, you have the link?
– hugocsl
I am using the Theme Accesspress Store Woocommerce, I am not using bootstrap @hugocsl , and is not yet published, is in maintenance phase
– Tiago Ferezin
Do you already have the page link? But I can tell you that the problem is that each product has a text size. If you put all the texts with same size will not have problem. I am talking about the green text in the product description, some have 2 lines, other 4 lines, if all have 2 or if all have 4 think it will not be a problem. But to solve without the code...
– hugocsl
@hugocsl, that was the problem, has been solved, if you want to put as answer I accept it
– Tiago Ferezin
It was worth the force Tiago, I left a reply with more details and an example for you to test and see better why this break happens. []’s
– hugocsl