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
2535 301 634

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
dmwwebartisan
Shopify Partner
9731 2225 3053

@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 →
Pallavi
Shopify Expert
2406 401 520

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
9731 2225 3053

@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
9731 2225 3053

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