hey,
i would like to make the spacing (marked in red) smaller without changing the image size.
can anyone help me please?
url: sixdreamz.com
password: sdc2003
Topic summary
A user seeks to reduce spacing between product images on their Shopify store without altering image dimensions.
Initial Solutions Proposed:
- GTLOfficial suggested adding CSS code to
section-main-product.csstargeting.product-media-container.constrain-heightwith aviewport-offsetproperty of 380px for screens wider than 750px - DitalTek identified the root cause as incorrect image aspect ratios, recommending cropping images to proper proportions
- An additional CSS solution was offered to modify the
row-gapproperty in.product__media-wrapper .product__media-list.grid
Current Status:
The user resized their images but reports the spacing issue persists. DitalTek provided a follow-up CSS snippet modifying the padding-top property using min() function with CSS variables for constrained height containers. The discussion remains ongoing as the user seeks alternative solutions.
Hello @sixdreamz
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-product.css
add this code at the end of the file.
@media screen and (min-width: 750px) {
.product-media-container.constrain-height {
--viewport-offset: 380px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
The issue happen because your image size incorrect ratio
There are you can see the top of part image is so large, so you can resize by crop image size to balance.
Addition you can change gap between images by css.
Themes → Customize Code → Assets/section-main-product.css
@media screen and (min-width: 750){
.product__media-wrapper .product__media-list.grid {
row-gap: 0;
}
}
hey, i made the image smaller and it still doesnt work. any other idea?
You can add a short code to : Assets/section-main-product.css file, then save that file and refresh product to test.
.product-media-container.constrain-height .media {
padding-top: min(var(--constrained-height), var(--ratio-percent)) !important;
}
This is result:
