Product page images on mobile are off-center or partially cut off; the first image displays correctly but subsequent ones do not. The store uses the Dawn theme, and screenshots plus a link with password were provided for context.
A suggested fix is to add custom CSS targeting small screens via a media query, setting product images to object-fit (contain or cover), width: 100%, height: auto, and centering the image wrapper with flex and overflow hidden. Briefly: CSS (styling rules), media query (CSS rules applied at specific screen sizes), and object-fit (controls how an image fits within its container).
The original poster cannot add more lines in the product’s custom CSS section due to a limit and reports that adding the code to theme CSS did not work.
No resolution yet. The thread is seeking an alternative placement or method for the CSS so it applies on mobile, or another approach to prevent image cropping.
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
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;
}
}
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?
