Hi, does anyone know how to solve this spacing issue/glitch in the space between my product image and info? It is only an issue under the product images of this one listing I have, all the other are total fine which I don’t understand. The issue is on a mobile not on a desktop. Thank you!
Topic summary
A user encountered excessive spacing between product images and product information on mobile view, affecting only one specific product listing while others displayed correctly.
Root cause identified:
The problematic product has a taller image compared to other listings, causing inconsistent spacing on mobile devices. The issue does not appear on desktop.
Solution provided:
Add custom CSS to the “Product information” section in the theme customizer to force all product images into square containers with consistent padding:
- Set
padding-top: 100%on.product__media - Apply
object-fit: containto images
Before/after screenshots demonstrate the fix successfully normalizes the spacing. The original poster confirmed the explanation made sense and planned to implement the solution.
This is because the last product image is taller.
I do not remember what product media settings were available for Dawn 2.4.
However, you can manually force images to fit into square – when configuring “Product information” section in Customize, open “Custom CSS” at the bottom of the section settings and paste this code:
.product__media {
padding-top: 100% !important;
}
.product__media img {
object-fit: contain;
}
Before => After
Thank you so much that makes total sense! Let me try that asap
1 Like