Why are my products not aligning properly on Shopify?

Solved

Why are my products not aligning properly on Shopify?

JunaidWeb
Tourist
8 0 1

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?

 

Screenshot_30.png

 

WhatsApp Image 2024-07-09 at 22.53.24_a2f56cbf.jpg

 

Accepted Solution (1)
wo
Shopify Partner
139 32 29

This is an accepted solution.

It seems that you have no coding foundation.

wo_0-1720752148575.png

 

Modify this to become

.m-product-card{position: relative;display:flex;flex-direction: column;justify-content: space-between;height:100%;}

 

View solution in original post

Replies 11 (11)

Made4uo-Ribe
Shopify Partner
6999 1665 2057

Hi @JunaidWeb 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
JunaidWeb
Tourist
8 0 1

Yeah sure. 

https://gzar.ae/

wo
Shopify Partner
139 32 29

Find .m-product-card in the component-product-card.css file and add the CSS code

wo_0-1720582933080.png

 

JunaidWeb
Tourist
8 0 1

Please share the code?

JunaidWeb
Tourist
8 0 1

Are you there???

 

wo
Shopify Partner
139 32 29

Just to add the code I marked.

display:flex;
flex-direction: column;
justify-content: space-between;
height:100%;

 

JunaidWeb
Tourist
8 0 1

This code is not working. I have added this code but still the products not aligning properly on Shopify. Please solve?
Screenshot_36.pngScreenshot_33.png

JunaidWeb
Tourist
8 0 1

Please reply???

JunaidWeb
Tourist
8 0 1

Please assist me, kindly solve my issue!

wo
Shopify Partner
139 32 29

This is an accepted solution.

It seems that you have no coding foundation.

wo_0-1720752148575.png

 

Modify this to become

.m-product-card{position: relative;display:flex;flex-direction: column;justify-content: space-between;height:100%;}

 

JunaidWeb
Tourist
8 0 1

Thank you it's working.