How can I adjust my theme mobile banner to avoid white gaps?

emlarbey
Tourist
11 0 1

My desktop banner on my draft theme I am working on won't adapt properly for mobile and is displaying a white gap underneath for a heading and button which I don't want. 

 

Is there a way I can add separate banners for desktop and mobile?

Replies 15 (15)

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Hi @emlarbey 

Please add 2 banner sections, one for mobile and another for desktop, after that please share me your store link so I can provide CSS code to make desktop banner display on desktop and mobile banner display on mobile only

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

Hi Dan,

 

How do I do this? I am currently using the 'Slideshow' element from the Refresh theme

 

Thanks,


Emily

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

You can add 2 Slideshow section, one section add image for mobile, one section add image for desktop 

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

Hi Dan,

 

I have now added 2 slide shows, not sure how to select it to be a mobile one though or will the CSS do this?

 

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Drop your store link here so I can provide CSS code to do it.

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

My theme is in draft - how do I do this?

 

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Click on preview in theme then get preview link by clicking Share preview 

Screenshot_6.jpg

Screenshot_7.jpg

 

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1
Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Please add this code at the bottom of your base.css file 

#shopify-section-template--16050624987328__640a3715-edc3-4786-b68d-a803563f4413 { display: none; }
@media (max-width: 767px){
#shopify-section-template--16050624987328__640a3715-edc3-4786-b68d-a803563f4413 { display: block !important; }
#shopify-section-template--16050624987328__slideshow { display: none; }
}

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

Hi, 

 

Is this just at the bottom of my theme file?

 

Kind Regards,

 

Emily

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Yes, add it at very bottom of your base.css file 

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

Hi Dan, 

 

I have pasted at the bottom of my theme.liquid file and saved - the preview still looks the same showing both banners?

 

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

I told you add code at the bottom of your base.css file, not theme.liquid file. If you add code in theme.liquid file, please use this code and add ti before </head> tag 

<style>
#shopify-section-template--16050624987328__640a3715-edc3-4786-b68d-a803563f4413 { display: none; }
@media (max-width: 767px){
#shopify-section-template--16050624987328__640a3715-edc3-4786-b68d-a803563f4413 { display: block !important; }
#shopify-section-template--16050624987328__slideshow { display: none; }
}
</style>

 

- Helpful? Like and Accept solution or ❤Donate❤
- 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.

emlarbey
Tourist
11 0 1

It worked, thank you so much! 

 

Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Very welcome

- Helpful? Like and Accept solution or ❤Donate❤
- 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.