Remove empty space from mobile image banner - dawn theme 14.0.0.

Remove empty space from mobile image banner - dawn theme 14.0.0.

Stef_PSP
Tourist
3 0 2

Hi, 

 

After much trial and error, i've managed to get the image banner on desktop to automatically resize when viewed on mobile. The banner size is 1600 x 810 px. The following code seemed to work:

 

Screen Shot 2024-10-05 at 1.13.13 pm.png

 

My dilemma now is that there is blank space above and below the banner when viewed on mobile. How do I eliminate the blank space? Pic of mobile view for reference. 

 

Screen Shot 2024-10-05 at 1.15.31 pm.png

 

Any help would be greatly appreciated. Thank you! 

Replies 5 (5)

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @Stef_PSP, You need a tall image for mobile. Here is an example
https://cdn.pixabay.com/photo/2019/10/30/14/51/fall-4589724_1280.jpg

Hope this can help 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

Stef_PSP
Tourist
3 0 2

Thanks for responding. 

 

Will the tall image work for desktop though? Is there a way of using a wide desktop image, and adding a seperate tall mobile image on dawn theme?

BSSCommerce-HDL
Shopify Partner
2305 834 907

@Stef_PSP, You should use 2 banners, 1 for desktop only and 1 for mobile only.

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

Stef_PSP
Tourist
3 0 2

Thanks. How do I do this in the Dawn theme? There isn't an option to upload both a desktop and mobile image. Is there a code solution to insert somewhere? 

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @Stef_PSP, You should create 2 section banners. Then insert 1 section with desktop image and 1 section with banner mobile image. Then I will help you with the code

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