Reduce gaps between images

Store Design

Topic summary

A user seeks to reduce spacing between images in their Shopify store without affecting image width.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Open theme.liquid file
  • Insert custom CSS before the closing tag
  • The CSS targets .slider-mobile-gutter .grid--3-col-desktop with column-gap: 0.7rem !important for screens 750px and wider
  • Gap value can be adjusted as needed

Outcome: The original poster confirmed the solution worked with a thank you response.

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

Hi everybody,

I’d like to reduce the gaps between images here that would not affect their width.

Please check my url: https://189ee3-2.myshopify.com/

Thank you guys,

Screenshot (2).png
Screenshot (2).png1296×606 302 KB

2

Hello @collins276

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .slider-mobile-gutter .grid--3-col-desktop { column-gap: 0.7rem !important; /*adjust according to you*/ } }

techlyser_web_0-1711800962066.png
techlyser_web_0-1711800962066.png1259×471 275 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Thank you :folded_hands: :grinning_face: