Product images cut off on mobile

[ascended]

Hello, on my product page of each product the images get cut off. The first image fits okay, but then the rest of the images are off center, or cut off. It is only like this on mobile. Is there anything I can do to fix this? Thanks

 

 store: link

password: first

page: shop all > product(first one)

theme: dawn

[shahrozbabar5]

Hi @ascended, this is a bit code thing, you just need to add custom CSS at the storefront and it will be fixed. the code is below. add it into the products section scroll down and select custom CSS or additional CSS

@media only screen and (max-width: 767px) {
.product-gallery__image-wrapper img {
object-fit: contain; /* or cover depending on your preference */
width: 100%;
height: auto;
}
.product-gallery__image-wrapper {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
}

[ascended]

Hello, thanks for the help! Unfortunately I already have the max amount of lines for custom css on my product information section. I tried adding to my theme's css files, but it didn't seem to work. Is there anything else I can do?