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.
1

i have been trying different codes for my refresh theme store but nothing seems to be working so far. the spacing between the product images on the product page need to be reduced to no space at all.

STORE URL: https://facce-amsterdam.nl/

CODE I HAVE TRIED TO USE:

@media only screen and (max-width: 767px){

.card.card–standard.card–media {

margin-right: 8px !important;

}}

2

This is Noah from PageFly - Shopify Page Builder App

Hi @Svds You want remove space between image product like image here:
https://monosnap.com/direct/KoxlhnxUGyuEx1Y56JpS3v89LIUyys
Please help me confirm and I will check it.
Thank you

Best regards,

Noah | PageFly

3

Hi @Svds Please add code here to file theme.liquid and above tag :

Thank you !

4

unfortunately it did not work, it only pushed pictures more to the right side of the screen i need the picutures to cover the whole screen.

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!