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;
}
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.
1 Like