My product images are getting cut off.
Theme: Refresh
Examples:
Topic summary
Users are experiencing product images being cropped or cut off when using Shopify themes (primarily Refresh, also Craft).
Proposed Solution:
A CSS fix was provided involving adding object-fit: unset; to the .media.media--transparent.media--hover-effect img selector in the theme’s CSS file (base.css, style.css, or theme.css).
Issue with Solution:
While the CSS code prevents cropping, it causes images to appear stretched and distorted instead. Multiple users confirmed this stretching problem after applying the fix.
Current Status:
The discussion remains unresolved. The helper requested store URLs and design goals from affected users to provide more tailored solutions that balance proper image display without distortion. No alternative fix has been offered yet.
1 Like
Hi @danielsm
Can I check? Would you mind to share your store url? Thanks!
1 Like
1 Like
Thank you,
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.media.media--transparent.media--hover-effect img {
object-fit: unset;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Code worked, but stretched all the images, using the Craft theme. Any way to fix this?
1 Like
It may work but the design is not for your store, If you would not mind to share your store url and what design your aiming? Thanks!