How can I resize images in the Minimal theme?

Hi can anyone tell me if it’s possible to have images all the same size on the ‘Products’ page. I have attached a screenshot and I would like the small images underneath the top large image to also be large so they fill the void underneath, kind regards, Molly.

Hello @Molly8

add this css to your .CSS file at last

.product-single__image-wrapper > div {
    padding-top: 100% !important;
}

.product-single__image-wrapper > div img {
    width: 100%;
    max-width: 100% !important;
    height: 100%;
    max-height: 100% !important;
    object-fit: cover;
}

.product-single__thumbnails a {
    position: relative;
    display: block;
    padding-top: 100%;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.product-single__thumbnails a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Hi,

No that made my main image bigger and the second one smaller. Did you mean Theme CSS or Timber CSS. I used theme CSS.

Kind regards

Molly