A user wants to reduce the spacing between image banners in their Shopify store using the Symmetry theme to 10px while maintaining the original left and right screen margins.
Initial Solution:
.gallery--with-margins .gallery__item with margin: 0 0 10px 10px at media query @media (min-width: 768px)Issue Encountered:
The initial code reduced spacing but eliminated the left screen margin entirely, as shown in the user’s screenshot.
Revised Solution:
Modified CSS code using :not(:first-child) selector to preserve the left margin on the first collection item while applying 10px left margin to subsequent items: margin-left: 10px
This targets only items after the first one, maintaining the original left screen spacing while achieving the desired 10px gaps between banners.
if you like to remain the left margin on the 1st collection Check this one.
Replace the code below.
@media (min-width: 768px) {
.gallery--with-margins .gallery__item:not(:first-child) {
margin-left: 10px;
}
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
