Image on the slideshow is cropped on the right side

Shopify Discussion
1

For some reason my image on the sliders get cropped on the right, I tried editing the original image to different sizes and aspect ratios and nothing worked. If someone can help me i would appreciate it!

image
image357Ă—649 51.3 KB

2

Hi @user68,
Please send the website link, I will check it for you

3
4

Hey @user68,
Thanks for sharing the store url.
In order to fix the issue with the product media image crop on the right side on mobile devices then you need to follow these steps.
Go to Shopify admin >> Online Store >> Themes >> Edit code >> base.css
In the end of this file paste the following code.

@media screen and (max-width: 749px) {
    media-gallery .slider.slider--mobile .grid__item {
        width: 100% !important;
    }
}

results:

image
image391Ă—769 57.4 KB

5

that CSS fix above should help with the container sizing, but worth flagging: even with the width fixed, the crop position itself is usually still centered by default — so if the part of your image getting cut off is off-center (like it looks in your screenshot), you might still lose the same edge even after the width fix lands, just by a smaller margin.

if that’s still happening after trying the snippet above, it’s less a CSS bug and more that the theme has no way to tell it “keep the left side of this specific image visible” — object-position in the slider CSS is uniform across all images, it can’t be set per-image without a code change every time you swap a photo.

have you tried any apps that handle this at the image level instead of the theme level? curious whether that’s a smoother workflow than re-touching CSS each time, or if most people just re-export the image itself to reposition the subject. genuinely trying to figure out if that’s the more common approach.