How can I code to make all collection images the same size?

Store Design
1

Hi There,

On my main shop page the collection images look fine however, when you click into the ‘shop’ page all the collection images are different sizes. I like the size that they are I just want to make them the same, is there anyway this can be coded?

poochedout.co.uk - password bonnie20

Thanks

1 Like
2

Hi,
It look like your collection images have different aspect ratio, you have to make them the same so they can be displayed in same manner

3

Hi @poochedout ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
.template-list-collections .grid__item .collection__grid-image-wrapper > div {
    padding-top: 130% !important;
    position: relative;
}

.template-list-collections .grid__item .collection__grid-image-wrapper > div img {
    height: 100% !important;
    object-fit: cover;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

4

@poochedout

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.collection__grid-image-wrapper div {padding-top: 135% !important;}
.collection__grid-image-wrapper img {height: 100%;object-fit: cover;}
5

Hi Ketan,

Thanks so much for your help this has worked!

1 Like
6

@poochedout

its my pleasure to help us