How to fix product alignment issues on a collection page?

Technical Q&A
1

Hello,

When I view my products on a collection page, after the first couple rows the products are no longer aligned due to different product title lengths, reviews, and even sold out text causing some images to shift further down as opposed to others. Thus my collection page get extremely misaligned and looks very sloppy.

I use an app to resize my images, so this seems to be strictly about the text.

Please let me know if there is any solutions, I use the Venue theme.

2

Hi @anth ,

You limit the title of the product to 1, 2, 3,… lines, this will depend on your requirements. Go to Assets > theme.css and paste this at the bottom of the file:

.product-card__title{
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	min-height: 60px;
}

‘-webkit-line-clamp: 2’: You can change the number 2 to your liking.

If it is 1, you just need to remove ‘min-height: 60px;’ , if it is more than 1, you need to check and reset to ‘60px’, it will display fine.

Hope it helps!