How do i change the banner size on mobile view - DEBUT Theme

healhana
Explorer
63 0 22

Hi there

The banner is too big on mobile, I believe this is due to the logo not changing size - any ideas how to fix?

Screenshot 2021-03-04 at 20.24.16.png

Thanks!

Replies 13 (13)

dmwwebartisan
Shopify Partner
12280 2546 3694

@healhana 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

KetanKumar
Shopify Partner
36839 3635 11972

@healhana 

Sorry for facing this issue, it's my pleasure to help us.

your store is password protect can you please share us 

So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

healhana
Explorer
63 0 22

Thanks guys, url is healhana.com and the preview is on https://w0sdwyel2km4s2tn-47542796440.shopifypreview.com.

Please let me know if you need anything else?

KetanKumar
Shopify Partner
36839 3635 11972

@healhana 

Thanks for the preview URL

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--large { height: 200px;}
.index-section--flush:first-child {margin-top: 70px;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
healhana
Explorer
63 0 22

Thanks for your help guys, this worked and is almost there!

The only problem now is that the image is really small on mobile, is there a way to stretch it down? Or maybe select a different image for mobile view that will fit the screen better?

Looks like this now...

 Screenshot 2021-03-05 at 10.59.03.png

Ideally i would want the image to cover most of the screen, at least 70-80% of the space below the header.

Thanks!!

healhana
Explorer
63 0 22

Sorry i think there was a bit of confusion here.

initially when i said banner, i actually meant heading. The heading size is too big for mobile and i believe it was due to the logo size.

BUT you did help me solve another issue of mine which was the image (banner) not resizing when going from desktop to mobile.

I hope this makes sense?

Thanks

KetanKumar
Shopify Partner
36839 3635 11972

@healhana 

thanks for confirm 

yes is possible to upload different mobile image to customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
healhana
Explorer
63 0 22

How would i go about doing this? 

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@healhana 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mohammad5
Visitor
1 0 0

Hey, 

@KetanKumar 

I am also facing an issue where my banner on my mobile view is different than on my desktop view. For some reason the banner on my mobile is zoomed in. 

 

Website - https://merches-kw.myshopify.com/

Password - merches 

 

Can you please help me with this?

SagarSukhanandi
Shopify Partner
279 58 71

@healhana Happy to help you on this issue

Here is the simplest solution
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.


 

@media only screen and (max-width: 749px) {
div#Hero-hero-2 {
    background-position: bottom !important;
    background-size: contain;
    height: auto;
    display: block;
}
}

 


 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
finnfeather
Visitor
1 0 1

Hello,

I tried to do this, but it did not work. Can you help me out? 

Thank yoU!!

KetanKumar
Shopify Partner
36839 3635 11972

@finnfeather 

store url please

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing