Bottom of Product Image Cut off Mobile Thumbnail

Store Design
1

my product images look fine on desktop and on the product page but on the mobile homepage the thumbnails are either smaller or cut off on the bottom. rosesandrelic.com

2 Likes
2

So what is the problem. How do I fix it ?

3

@reesha2725

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product--wrapper div {
    position: relative;
    margin-bottom: 30px;
}
.product--wrapper div .product--image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
}
.grid-product__image-wrapper {
    height: auto !important;
}
1 Like