How to add space between product images on mobile devices

[awirtz]

How can I add space/ padding between product images on mobile devices using the Pipeline theme? Any help is much appreciated.

Here is a link to my site: https://annwirtz.com/collections/artwork

[BSSCommerce-HDL]

Hi @awirtz ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (max-width: 767px) {
    .collection__products .js-grid div {
        margin-left: 5px !important;
    }

    .collection__products {
        margin-left: -17px !important;
    }
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Vinsinfo]

@awirtz Please follow the below steps to add space between product images. Let me know whether it is helpful for you.

1. Go to “Online stores” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Search “theme.css” file and paste below code at the bottom of the file like in the below attached screenshot.
   NOTE: You can modify the values of the column gap as per your need.

@media only screen and (max-width: 479px) {
    .collection--compact-mobile .js-grid {
        column-gap: 12px !important;
    }
}

4. Final Results will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[awirtz]

Thank you for the help, that code worked. I appreciate your time.