Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: make spacing smaller

make spacing smaller

sixdreamz
Explorer
110 0 37

hey,

 

i would like to make the spacing (marked in red) smaller without changing the image size.

 

can anyone help me please?

 

sixdreamz_0-1727435959179.png

 

url: sixdreamz.com

password: sdc2003

 

 

Replies 4 (4)

GTLOfficial
Shopify Partner
658 140 133

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
11.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

DitalTek
Shopify Partner
779 93 110

The issue happen because your image size incorrect ratio

VIEKIN_0-1727436491982.png

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

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or WhatsApp.
- Contact Support : Gmail | WhatsApp: +84 398999359
sixdreamz
Explorer
110 0 37

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

 

 

DitalTek
Shopify Partner
779 93 110

@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:

VIEKIN_0-1727693081058.png

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or WhatsApp.
- Contact Support : Gmail | WhatsApp: +84 398999359