Products are not aligned on collection pages

Solved

Products are not aligned on collection pages

anth
Excursionist
28 0 3

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: 

Screen Shot 2022-01-22 at 6.50.20 PM.png

 Notice how the grids DO NOT line up.

Accepted Solution (1)

suyash1
Shopify Partner
9534 1190 1529

This is an accepted solution.

@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;}

 

suyash1_0-1642909941675.png

suyash1_1-1642909962054.png

 

 

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 8 (8)

suyash1
Shopify Partner
9534 1190 1529

This is an accepted solution.

@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;}

 

suyash1_0-1642909941675.png

suyash1_1-1642909962054.png

 

 

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
anth
Excursionist
28 0 3

That worked! Thanks so much @suyash1 

suyash1
Shopify Partner
9534 1190 1529

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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Stelle
New Member
5 0 0

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
New Member
5 0 0

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

Stelle_0-1695897013807.png

 

suyash1
Shopify Partner
9534 1190 1529

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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Stelle
New Member
5 0 0

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.

Stelle_0-1695969778020.png

 

BubbleLabz
Visitor
1 0 0

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