CODEWITHSUNDEEP
wordpresswoocommerce
Joe Solonenko
Joe Solonenko

Reputation: 1

Woocommerce Products not aligned

Can anyone help me with the below screenshot. All my products are all over the webpage and they are not aligned

I have tried to regenerate thumbnails and this does not solve my problem. I have set dimensions and added new images, that doesn't work I have tried turning off remote amazon images, and that didn't work.

Any ideas? Screenshot

Upvotes: 0

Views: 3293

Answers (2)

Ishtiyaq Husain
Ishtiyaq Husain

Reputation: 424

Use flexbox and align product items flex-end which will position the items at the bottom of the container and specifying a min-height value for the header tags because some names might span over 2 or more rows.

ul.products {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

ul.products li.product a h3 {
  min-height: 40px;
}

Upvotes: 1

ExQlusiv3_
ExQlusiv3_

Reputation: 1

They are aligned. Only when the div is larger than... The whole layout looks weird.

Try changing the min-height of the div what holds the product.

There might be a better solution, but it hasn't come up in me yet

Upvotes: 0

Related Questions