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

[healhana]

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?

Thanks!

[dmwwebartisan]

@healhana 

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

Thanks!

[KetanKumar]

@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.

[healhana]

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?

[SagarSukhanandi]

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

[KetanKumar]

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

[healhana]

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...

 

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

Thanks!!

[healhana]

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]

@healhana 

thanks for confirm 

yes is possible to upload different mobile image to customization code

[healhana]

How would i go about doing this? 

Thanks!