Products are not aligned on collection pages

[anth]

Hello,

I have posted this a few times with little success…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 and have just published a new version of the theme, this issue did not exist on my old version of Venue.

Here is a link to my website: https://pbexpressliquor.com/

If you notice on the home page, the fourth item on the second row under ‘Featured Products’ is affected by this (it is slightly lower than other products on that row). If you select any of the categories on the top, for example wine or spirits, and look through the collections page, you will quickly start to notice that as you scroll down items become unaligned.

This is a big issue for me and I desperately need a fix. I have posted this issue before but with little help/success.

I would really appreciate someone helping me to make all my products aligned and looking good.

I added a grid to my products and attached a photo of it so this issue is more clear:

Notice how the grids DO NOT line up.

[suyash1]

@anth - please try this css and check , should be like screenshot below

.template-collection .o-layout {height: 100% !important;}
.template-collection .o-layout__item {position: initial !important;}

[anth]

That worked! Thanks so much @suyash1

[suyash1]

@anth - welcome, do let me know if you need any update later, you have my email below.

[BubbleLabz]

I created like 5 collections but they are not showing up in the options menu drop down bars.

[Stelle]

Dear Suyash1, where do I put the code you suggest?

.template-collection .o-layout {height: 100% !important;}
.template-collection .o-layout__item {position: initial !important;}

[Stelle]

Hi Suyash1, this should have been my first question

Can I solve this ( see screenshot with the code you provided?

As you can see the top of all my product images are not alligned.

Can you step by step show me where to put the code please?

Thanks upfront, Stelle

[suyash1]

@Stelle - can you please share the page link of this screenshot? you have base.css file

[Stelle]

Good morning dear Suyash

The URL you asked me for is: https://aayfashion.com/collections/bags

My question is how to get the top of all product images at the same height.

Thanks Upfont.