Symmetry Theme change Spacing

Store Design

Topic summary

A user seeks to modify image gallery spacing on mobile for the Symmetry theme, specifically wanting:

Desired spacing:

  • 0px left and right margins
  • 10px between images

Solution provided:

A developer shared CSS code to be added to the theme’s base.css file:

  1. Access Shopify admin → Online Store → Themes → Edit code
  2. Locate base.css
  3. Add media query targeting mobile devices (max-width: 768px)
  4. Apply custom CSS to .gallery--with-margins class removing horizontal margins and gutters
  5. Set .gallery__item with 0px left/right margins and 10px bottom margin

The solution uses !important flags to override existing theme styles. The user was reminded to mark the answer as accepted if the solution works.

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

Hello, on mobile I want to change the space for the image gallery sections. I want it to be 0px left and right & 10px between images. Thank You

store: www.cultureposter.com

Screenshot 2024-09-22 at 20.56.53.png
Screenshot 2024-09-22 at 20.56.53.png804Ă—500 5.83 KB

2

Hello,

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

@media (max-width: 768px) {
    .gallery--with-margins {
        margin-right: 0px!important;
        --gallery-gutter: 0px!important;
    }

    .gallery--with-margins .gallery__item {
        margin-bottom: 10px!important;
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
}

Arif_Shopidevs_0-1727111475334.png
Arif_Shopidevs_0-1727111475334.png834Ă—706 6.49 KB

Do not forget to make the answer as solution and like the solution :slightly_smiling_face:
THank you

1 Like