Collection Page Product Grid Images Alignment

Store Design
1

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! :heart:

Site : www.pavefindings4u.com

All the best!

2

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

3

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

4

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;
}
5

Hi,

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

6

Hi dmwwebartisan ,

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

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

All the best,

7

@mmazter

Code for mobile

@media screen and (max--width: 749px){
.template-collection .product-img img {
    width: 100%;
    max-height:100%;
}
}
8

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. :disappointed_face:

All the best

9

@mmazter

Please share screenshot what do want

Thanks!