Product collections Page products not aligned properly

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 and have just published a new version of the theme, this issue did not exist on my old version of Venue.

I have attached a photo of the issue, please help me because last time I posted this issue none of the solutions were helpful.

2

@anth - i think we will need to set height using css, can you please share this page link?

3

Hello,

Could you be more specific which page link you need?

4

@anth - the page of which you have added the screenshot

5

Yes of course, here is one of the pages affected:

https://pbexpressliquor.com/collections/cabernet

In fact all my collection pages are affected. Any item for example with a longer name will push the items below it further down and cause alignment issues.

6

@anth - please add this css to the very end of theme-critical.scss.css file and check, should be like screenshot below

.template-collection .o-layout--small .o-layout__item {
    position: initial !important;
}

suyash1_0-1642778105952.png
suyash1_0-1642778105952.png1366×768 158 KB

7

That worked to align the images, but now it has caused another issue, it has pushed the bottom of the text and the buttons to move to the next page further to the bottom.

Here is an image attached of what I am talking about:

Screen Shot 2022-01-21 at 8.03.46 AM.png
Screen Shot 2022-01-21 at 8.03.46 AM.png853×501 89 KB

8

@anth - on which page are you seeing this?

9

I am seeing this on every collections page.

Scroll to the bottom of this page for example:

https://pbexpressliquor.com/collections/whiskey

The names of the items at the bottom are cut off and so is the navigation.

10

@anth - yes that is an issue, you can remove given css, it is not working

11

Is there any other solution to this issue?

Any help would be greatly appreciated.

12

@anth - i will check more and let you know

13

@suyash1 Okay, thank you so much for the quick responses and continuing to help me.

I really do appreciate it!

I will await further instruction.