make spacing smaller

[sixdreamz]

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

[GTLOfficial]

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

[DitalTek]

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

[sixdreamz]

hey, i made the image smaller and it still doesnt work. any other idea?

[DitalTek]

@GTLOfficial 

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: