Remove Gaps Between Product Images

[martujv]

Hello!

Basically I want to remove the small gaps that appear while scrolling the product images on the product page (both in mobile and desktop versions).

Photos for reference

(The red arrows show the gaps that should be removed)

Mobile version:

Desktop version:

My website is: https://n6ia1fdm0ovh4srq-60150284501.shopifypreview.com and my theme is Stiletto

[BSSCommerce-B2B]

hi @martujv 

I have reviewed your requirement you can do that 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file them.css
Step 3. Copy this code at the end of the file

.product__media-container[data-gallery-style=list] .product__media{
gap: 0px !important;
  grid-gap :0px !important
}

Result

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[martujv]

Hello! What about the mobile version?

[AK_Design_Dev · Accepted solution]

Hello @martujv 
add this css in base.css or theme.css

.product__media-container.below-mobile .product__media-item {

            margin: 0 !important;

}

.product__media-container[data-gallery-style=list] .product__media {

          --grid-gallery-spacing: 0 !important;

}

[martujv]

It worked, thank you!!!

[AK_Design_Dev]

Yes...