How to add space between two images on mobile

[YIVAN]

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.

[BSSCommerce-HDL · Accepted solution]

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 😍

[BSSCommerce-HDL · Accepted solution]

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 😍

[Dan-From-Ryviu · Accepted solution]

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; }
}