Re: How to add space between two images on mobile

Solved

How to add space between two images on mobile

YIVAN
Explorer
54 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 Partner
2305 834 907

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
2305 834 907

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.