Shopify Dawn theme Banner Image is not fitting to screen.

Sattire
Visitor
3 0 0

Hi,


I'm trying to fit the banner image to the entire mobile screen. But it's not happening. I've tried all kind of codes that were shared for similar problems, but nothing seems to work. 

The banner image is taking only half of the screen on mobile, and the rest is taken by other sections.

I wanted the banner image to fill the screen entirely on any mobile device, so that only the banner image is visible when a customer lands on the mobile version of the website.

 

Replies 5 (5)

kaiyaa
Excursionist
182 13 19

Hello @Sattire 


You can use two different images for both views desktop and mobile.

It's possible by css also but it will affect image quality. So better way is this use different images for both 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Sattire
Visitor
3 0 0

@kaiyaa Thanks for the reply. But I've tried using different images for Desktop & Mobile. But the second image still is not covering the entire screen. It's still covering nearly 60% of the screen only. 

kaiyaa
Excursionist
182 13 19

Can you please share your store link @Sattire 

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Sattire
Visitor
3 0 0

tim
Shopify Expert
3464 280 1285

You can always add 

.banner { height: 100vh; }

to the section "Custom CSS" settings but be prepared that your image will be cropped depending on the browser width/height.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com