Hi,
The images I uploaded seem to be very large and don’t fit on the screen. When viewing an item, customers must scroll down to see the complete image. I would like the images to be a smaller size but can’t manually edit them all.
Any solutions?
Topic summary
Main issue: product images appear too large or are cropped (both in product pages and “You may also like” grids), causing users to scroll and preventing full visibility.
Key fixes proposed (CSS in base.css):
- Set image sizing to auto and center it: .global-media-settings img { width:auto; margin:auto; right:0; }.
- Control aspect ratio via container: .global-media-settings { padding-top: 100% !important; } then later adjusted to 50% to reduce cropping of wide images.
- For recommendation grids: .product-grid .card .media { background:#fff; } and .product-grid .card__media .media img { height:100%; width:auto; }.
- Tried setting .product-grid .card__inner { --ratio-percent: 50% !important; } to influence card aspect ratio.
Outcome and latest update: Removing conflicting CSS in base.css improved display for many items. Some images (e.g., sectionals page 4) still don’t fit perfectly due to varying aspect ratios.
Context: Screenshots and page links were central. CSS (cascading style sheets) adjustments control image sizing; padding-top percentage is used to enforce an aspect-ratio container.
Status: Partial improvement; no universal solution finalized. LitCommerce notes a global fix will affect all images. A new question on applying this to another Shopify/Origin theme remains unanswered.
Hi @KMichael ,
Go to Assets > base.css and paste this at the bottom of the file:
.global-media-settings img {
width: auto !important;
margin: auto;
right: 0;
}
.global-media-settings {
padding-top: 100% !important;
}
Hope it helps!
Thank you for your help.
I would also need help with coding to resize the image when shown by “you may also like”
It only shows a fraction of the image there because the image was originally too large.
Could you help me with that?
Hi @KMichael ,
Please add code:
.product-grid .card .media {
background: #fff !important;
}
.product-grid .card__media .media img {
height: 100% !important;
width: auto !important;
margin: auto;
right: 0;
}
1 Like
Thank you.
This has helped with images that were too long to be shown. But some images are too wide to be shown fully. I am attaching an image of a loveseat. The image is chopped at the sides. What could be done to fix this?
Hi @KMichael ,
Please change code here:
Code:
.global-media-settings {
padding-top: 50%!important;
}
1 Like
it did help for most items, some items though still have the images not showing fully.
How should I edit that code?
Hi,
The image sizes are still not ideal.
Could you please try to help me figure it out?
Still, some photos are too wide to display completely.
Maybe we should make all of the images taller so that more of the width is visible?
Hi,
It is still not working properly.
What else could be done to fit it to screen?
Please check out this link.
1 Like
Much better. Many items show fully now. Is there any further solution for items like these?
Hi @KMichael ,
It will be really hard for everyone, if you want to, all images will be affected. Refer:
Hi LitComm! Does this apply to my own shopify too? How can I resize images freely and copy the size of the middle image from the Origin theme? Thank you..