How to add space between two images on mobile

Hello,

I am trying to add a space between the two images in the image banner section when on mobile. Is there any way I would be able to achieve this?

This is what I mean:

Here is what it looks like on desktop:

Note I want it to stay the same on desktop.

URL:https://www.yivan.us

Pass: YIVAN24

Thank you in advance.

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

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

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

.banner__media.media {
    margin-bottom: 20px !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 :heart_eyes:

1 Like

Hi @YIVAN
Go to your Online Store > Themes > Customize > open that section, add this code to Custom CSS

@media (max-width: 749px) {
.banner { row-gap: 16px; }
}
1 Like