remove white space in between image layout

Store Design

Topic summary

A Shopify store owner using the Symmetry theme wanted to remove white space between product gallery images arranged in a 2-column layout, making them touch each other like on a reference website (Scuffers).

Initial Problem:

  • Successfully removed vertical padding between images using custom CSS
  • Needed to eliminate horizontal spacing between side-by-side images

Solution Process:

  1. First CSS fix provided by DaisyVo removed left margins:
.slideshow.product-slideshow > div {
    margin-left: 0 !important;
}

  1. This created a secondary issue where the first image appeared oversized and misaligned the second image

  2. Made4uo-Ribe provided additional CSS to fix the first image sizing:

.gallery--layout-columns-2 .product-slideshow:not(.slick-slider) .slide:first-child {
    flex-grow: unset !important;
}

Resolution:
Both CSS snippets combined successfully achieved the desired layout with images touching both horizontally and vertically. The issue was marked as solved.

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

Screenshot 2025-01-22 at 21.35.52.png
Screenshot 2025-01-22 at 21.35.52.png3024Ă—1964 565 KB

Reference layout (image touching each other)

Screenshot 2025-01-22 at 21.34.28.png
Screenshot 2025-01-22 at 21.34.28.png3024Ă—1964 703 KB

Coding I used to remove the white padding underneath)

Hey there,

First of all, I am on symmetry theme. I would like my image gallery to be 2 pictures next to each other, like it is right now. But I want to remove the spacing in between the pictures so that they touch each other. How do I do this? I guess some simple code? (see scuffers website as a reference of the image layout).

I have done it already to remove the white padding underneath to touch each other where I used this code.

.gallery–layout-columns-1 .product-slideshow:not(.slick-slider) .slide {
margin-bottom: 0;
}

But how to also make them touch side by side? (like the scuffers site)

Thanks in advance!

1 Like
2

Hello,

Can you share your store url so we can give you the solution for this

3

Hi @Louver

Please, share your store URL. Thanks!

4

Hi, louverclo.com

5

Hi it is, louverclo.com

6

Hi @Louver ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.slideshow.product-slideshow > div {
    margin-left: 0 !important;
}

Here is the result:

DaisyVo_0-1737613598809.png
DaisyVo_0-1737613598809.png826Ă—741 350 KB

Please let me know if it works!

Best,

Daisy

7

Screenshot 2025-01-23 at 10.13.40.png
Screenshot 2025-01-23 at 10.13.40.png3024Ă—1964 575 KB

Only small issue

Screenshot 2025-01-23 at 10.13.43.png
Screenshot 2025-01-23 at 10.13.43.png3024Ă—1964 663 KB

Perfect!

Thanks Daisy, it almost works perfectly/ Only little bug there is now is the first image that does not seem to be responding and is bigger then it is supposed to be. See screenshots. And because of that, the second picture does not align properly. Do you have a solution for this as well? I would appreciate it so much

8

Thanks for the info, add this code.

To fix the image.

  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:
.gallery--layout-columns-2 .product-slideshow:not(.slick-slider) .slide:first-child {
    flex-grow: unset !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
9

Thank you so much! That worked!!!

10

Welcome, please hit like and mark solution also to the other post that helped you. Thanks!