FROM CACHE - en_header

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 642 1507

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

dmwwebartisan
Shopify Partner
10746 2343 3341

@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
3559 589 824

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
10746 2343 3341

@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
10746 2343 3341

@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 →