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 12 (12)
dmwwebartisan
Shopify Partner
9824 2236 3073

@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 | Bag is a cart drawer that maximizes your sales. View app →
KetanKumar
Shopify Partner
24923 2498 9040

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

SagarSukhanandi
Trailblazer
165 28 43

@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
KetanKumar
Shopify Partner
24923 2498 9040

@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
24923 2498 9040

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