Change spacing between product image on product page

Shopify Discussion

Topic summary

A user is experiencing unwanted spacing between product images on mobile product pages, where parts of adjacent images are visible on the sides (illustrated with a screenshot showing green highlighting).

Site affected: lungtank.com

Solutions proposed:

  1. Custom CSS approach - Add CSS to the section’s “Custom CSS” setting:

    • Sets scroll-padding-left: 0 on the mobile slider
    • Forces slider slides to width: 100%

  2. Theme file edit - Modify base.css directly:

    • Add media query targeting screens under 749px
    • Adjusts margin-right on first grid item to 1.5rem
    • Includes a before/after screenshot demonstrating the fix

Both solutions target the mobile-specific slider behavior. The discussion remains open with no confirmation from the original poster on which solution was implemented or effective.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I need to remove the spacing between the images on my product pages so that you cannot see part of the next image on the sides. I highlighted the spacing which need increasing with a green line in my image. This issue is only on mobile version!

culley62_1-1747710139728.png
culley62_1-1747710139728.png357×751 94.5 KB

2

www.lungtank.com

3

I’d scroll down to the “Custom CSS” setting of this section and paste this code:

.product__media-list.slider--mobile {
  scroll-padding-left: 0;
}

.product__media-list.slider--mobile .slider__slide {
  width: 100%;
}
4

Hello @culley62
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.grid--peek.slider .grid__item:first-of-type {
margin-right: 1.5rem !important;
}
}

result

1.png
1.png320×534 45.9 KB

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