make spacing smaller

Store Design
, , , , , , , , , , , , , ,

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.css targeting .product-media-container.constrain-height with a viewport-offset property 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-gap property 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.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
3

The issue happen because your image size incorrect ratio

VIEKIN_0-1727436491982.png
VIEKIN_0-1727436491982.png552×729 105 KB

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;
}
}