Geting rid of spacing in between images on product page

Technical Q&A

Topic summary

A user is experiencing unwanted spacing between product images on their Shopify store’s product pages and seeks a CSS solution.

Initial Solution Provided:

  • Add custom CSS code to the theme’s base.css file
  • Target specific gallery slider elements using their unique IDs
  • Set gap property to 0px to remove spacing

Follow-up Issue:
The original fix worked for initial products but didn’t apply to newly uploaded products on the site.

Updated Solution:

  • Modified CSS selector to target multiple gallery components
  • Uses combined selectors for both slider-gallery-template and galleryViewer-template elements
  • Same implementation method: edit base.css/style.css/theme.css in Assets folder and add code at bottom

Status: The helper provided an adjusted CSS snippet with broader selectors to ensure the fix applies across all product pages, though the reason why the original code didn’t automatically apply to new products remains unclear.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi!

We are trying to get rid of spacing in between images on product page. Please s. screen shot.

Any leads?

Screenshot 2023-06-14 at 21.44.45.png
Screenshot 2023-06-14 at 21.44.45.png1626Ă—1292 220 KB

store url: www.mism.store

Thanks in advance!

Best,

team-mism

1 Like
2

Hi @monomgroup ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
ul#Slider-Gallery-template--18395375305049__main {
    gap: 0px;
}
1 Like
3

Hi there, we uploaded some new products on the website. How would we need to amend the code so that it applies to the new product pages as well? Thanks in advance for your help

S. store url: https://mismstudio.com/products/eez-new-organic-oversize-shirt

best,

team mism

1 Like
4

Im not sure why they did not change when its just same code and selector.

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
slider-component#GalleryViewer-template--19134692950361__main ul#Slider-Gallery-template--19134692950361__main {
    gap: 0px
}

Result:

Ribe_Dagandara_0-1689262888079.png
Ribe_Dagandara_0-1689262888079.png686Ă—475 159 KB

I change a bit the code.