Hi everyone, I recently encountered this problem where my products don’t align as they should do, It’s on both devices desktop, and mobile some collection products are not aligning properly, anyone please solve?
Topic summary
Products in a Shopify collection grid were not aligning consistently on desktop and mobile. Screenshots were shared to illustrate misalignment, and the store URL was provided for reference.
Root cause focused on the product card layout. The solution centered on converting each product card into a flex container with a column layout and full height to standardize spacing and heights.
Implemented fix (in component-product-card.css):
- Target .m-product-card
- Set: position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%.
An initial attempt to add the properties didn’t work, likely due to not modifying the correct selector or not updating the existing rule. After explicitly updating the .m-product-card rule with the combined properties, the alignment issue was resolved.
Outcome: Resolved. No further actions pending. Images were used to demonstrate the issue and verify the fix.
1 Like
Hi @JunaidWeb
Would you mind to share your store URL? Thanks!
Yeah sure.
Please share the code?
Are you there???
Just to add the code I marked.
display:flex;
flex-direction: column;
justify-content: space-between;
height:100%;
This code is not working. I have added this code but still the products not aligning properly on Shopify. Please solve?
Please reply???
Please assist me, kindly solve my issue!
It seems that you have no coding foundation.
Modify this to become
.m-product-card{position: relative;display:flex;flex-direction: column;justify-content: space-between;height:100%;}
Thank you it’s working.