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
