How to make the gap between images in the product page slider consistent across all products? Post

[JoaquinExcitare]

Hi everyone,

I'm facing an issue with the image slider under the main product photos on my Shopify store. For some products (for example, Flower ring), there is a small visible gap between the images in the slider. However, for other products, the images in the slider are directly touching each other, without any gap.

I would like the gap between the images to be consistent across all products, no matter which device (especially mobile) a customer is using.

Does anyone know which code I could add to make sure that the spacing between the images in the product page slider is always the same?

Thank you in advance for your help!

[SavvyHQ]

• your Shopify Admin, go to Online Store > Themes.

• Click Customize next to your theme.

• Click the three dots (⋮) in the top left, then choose Edit code.

• Open the base, theme, or custom file (the name depends on your theme).

• Scroll to the bottom and paste the code above.

• Click Save.

[Moeed]

Hey @JoaquinExcitare 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.product__media-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
}
.thumbnail-slider .thumbnail-list.slider {
    padding-top: 0 !important;
    padding-left: 0 !important;
}
.slider.slider--mobile .slider__slide {
    padding-bottom: 0 !important;
}
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Beast_Boy]

Hi JoaqquinExcitare

if you want to lock in even spacing for all your slider pics, go to Online Store > Themes > Edit code and open your main CSS file.

look for the selector that wraps each slide (it might be called something like “slide” or “carousel-item”) and give it a consistent right (or bottom) margin—whatever feels right for your design.

Save your changes, refresh a few product pages on mobile and desktop, and you should see the same gap everywhere.

[RubyBliss7]

Hi there 👋

It sounds like your product image thumbnails (slider) are styled inconsistently—possibly due to different image sizes or variations in how the theme applies spacing (margin/padding) between them. This is common in themes like Dawn or custom ones using a Flexbox or Grid layout.

To fix this and make the gap uniform across all product pages and devices, you can add some custom CSS.

---

🛠️ Try This Custom CSS:

1. Go to:
   Online Store → Themes → ... → Edit Code

2. Open this file:
   assets/base.css or assets/component-product.css
   (The exact file may vary depending on your theme version)

3. Scroll to the bottom and add this code:

css

CopyEdit

.product__media-thumbnails {
display: flex;
gap: 8px; /* Adjust the gap as needed */
flex-wrap: nowrap;
overflow-x: auto;
}

.product__media-thumbnail {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
}

What this does:

• Forces equal spacing (gap) between thumbnail images

• Overrides any inconsistent margins/padding

• Keeps it responsive on mobile

---

📱 Tip for Mobile:

If you're seeing weird spacing only on smaller screens, you can also wrap this CSS inside a media query:

css

CopyEdit

@media screen and (max-width: 768px) {
.product__media-thumbnails {
gap: 6px;
}
}

 Let me know which theme you're using if you’re unsure where to place the code—I’d be happy to guide you step by step. 😊