Collections page grid layout misaligned.

Highlighted
New Member
1 0 0

Many pages like this one have the products misaligned and I'm having trouble figuring out why: https://livfeclothingco.com/collections/all?page=2

 

password: skuitu

 

If anyone could shed some light it would be much appreciated. This is my first time posting so if additional info is needed such as the code, please let me know.

 

 

0 Likes
Highlighted
Shopify Expert
643 44 140

It's because the height of the product thumbnail containers varies, and your theme isn't properly "clearing" the row.

 

For example if I add a CSS rule clear: both like this, it aligns the row like you'd expect:

cleared.jpg

 

To solve this, you can use the liquid cycle iteration.

 

You would skip the first thumbnail then apply the class to every 3rd item.

 

Then in CSS, create a rule that applies to desktop size where that class executes the clear: both.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes