How to add space between two images on mobile

Solved

How to add space between two images on mobile

YIVAN
Explorer
51 1 16

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:

Screen Shot 2024-06-09 at 9.53.23 PM.png

 

Here is what it looks like on desktop:

Note I want it to stay the same on desktop.

Screen Shot 2024-06-09 at 9.50.12 PM.png

URL:https://www.yivan.us

Pass: YIVAN24

 

Thank you in advance.

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an 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: 

BSSCommerceHDL_0-1717989521374.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an 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; }
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an 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: 

BSSCommerceHDL_0-1717989521374.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an 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; }
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.