Image spacing in product information section - SENSE

Store Design
, ,
1

Hi!

I would like to adjust the horizontal and vertical spacing between images in the “product information” section.

I am using the “stacked” layout. so 1 main image up top and two columns below.

So just want to adjust the spacing but maintain overall layout/look.

I tried searching/using chatgpt but nothing seems to work :broken_heart:

thanks!

2

Hello!

Please share “Store URL”.

Thanks.

3

Hi Steve!

https://tq0yvb955vpet2k1-90292224320.shopifypreview.com
password ZNCcnz123

4

Hello,

Watch this video, it will really helpful for you

Thanks!

5

Thanks for sharing but this doesn’t answer my question?

6

Hi @znc ,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product__media-list.grid {
    --grid-desktop-vertical-spacing: 8px;
    --grid-desktop-horizontal-spacing: 8px;
    --grid-mobile-vertical-spacing: 4px;
    --grid-mobile-horizontal-spacing: 4px;
}

You can adjust the px for desktop and mobile yourself.

7

Hi appreciate your response!
Code isn’t working for me.

im not 100% sure how to share the class name.

I inspected the page and this area is highlighted with the class name below.

If i need to do something different please let me know.

thanks!

8

@namphan
You are the most amazing person on all of earth!
thank you so much.
was going crazy trying to figure it out hahah.

9

Hi @znc ,

You’re welcome and happy to help you :blush: