How to reduce space between product images to no space at all (MOBILE)

Store Design

Topic summary

A user is attempting to eliminate spacing between product images on mobile for their Refresh theme store, but previous CSS attempts have failed.

Initial Problem:

  • Product page images have unwanted gaps between them on mobile devices
  • Multiple CSS codes tried without success

Solutions Attempted:

  1. PageFly-Noah’s approach: Suggested adding custom CSS to theme.liquid file targeting image spacing

    • Result: Did not work as intended; images were pushed to the right instead of spanning full screen width

  2. BSSCommerce-B2B’s solution: Provided CSS targeting .thumbnail-slider .thumbnail-list.slider--tablet-up with gap: 0 and flex display properties

    • Included a screenshot showing the result
    • Appears to be the working solution

Current Status:
The discussion seems resolved with BSSCommerce-B2B’s code successfully removing the gaps. The user was asked to confirm if this solution meets their requirements and mark it as resolved if successful.

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

Hi @Svds ,

I have tried this code

.thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: flex;
    padding: .5rem;
    flex: 1;
    scroll-padding-left: .5rem;
    gap: 0;
}

The result below

view.png
view.png1919×779 259 KB

If you need any additional requirements, please let me know. I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!