Collection Page Product Grid Images Alignment

mmazter
Excursionist
14 0 3

Hi everyone,

 

I couldn't find where the code is to align our website collection page product grid images, so we have short and tall OR images that in different sizes and they are not lined up properly on our Collection Page.

Is it possible to align them without changing the image sizes?

Thanks in advance everyone! ❤️

 

Site : www.pavefindings4u.com

 

All the best!

Replies 8 (8)
Zworthkey
Shopify Partner
5581 641 1503

hii, @mmazter 
Please use the same size images.
Thank You.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
dmwwebartisan
Shopify Partner
10710 2339 3325

@mmazter 

Please add the following code at the bottom of your assets/style.css file.

.template-collection .product-img img {
    width: 100%;
    max-height: 200px;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
ZestardTech
Shopify Expert
3512 580 805

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.template-collection .product-img img {
width: 100%;
max-height: 200px;
height: 24vw;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
mmazter
Excursionist
14 0 3

Hi,

 

This code is working however, it is not responsive on mobile view 😞

mmazter
Excursionist
14 0 3

Hi  ,

Thank you, your code is working, however, it is not mobile responsive 😞

Is there any solution we can make it a mobile responsive?

 

All the best,

dmwwebartisan
Shopify Partner
10710 2339 3325

@mmazter 

Code for mobile 

@media screen and (max--width: 749px){
.template-collection .product-img img {
    width: 100%;
    max-height:100%;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
mmazter
Excursionist
14 0 3

Hi @dmwwebartisan 

Thank you for the mobile code, however, it seems it is not working? I've pasted it to style.css

Whenever it is applied, the desktop/laptop view is reverting back to not being aligned. 😞

 

All the best

dmwwebartisan
Shopify Partner
10710 2339 3325

@mmazter 

Please share screenshot what do want

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →