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

Store Design
, , ,
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?

2

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

3

Hi Dan,

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

Thanks,

Emily

4

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

5

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?

6

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

7

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

8

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

Screenshot_6.jpg
Screenshot_6.jpg1019×555 47.9 KB

Screenshot_7.jpg
Screenshot_7.jpg1331×658 50.1 KB

9

Hi Dan,

Thanks - https://q1l06bk55dzk6liw-11178494.shopifypreview.com

10

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

Hi,

Is this just at the bottom of my theme file?

Kind Regards,

Emily

12

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

13

Hi Dan,

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

14

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 tag
15

It worked, thank you so much!

1 Like
16

Very welcome