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

Store Design
1

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
Screenshot 2021-03-04 at 20.24.16.png638×1068 563 KB

Thanks!

1 Like
2

@healhana

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

Thanks!

1 Like
3

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

1 Like
4

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?

5

@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;
}
}
1 Like
6

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

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
Screenshot 2021-03-05 at 10.59.03.png608×1022 469 KB

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

Thanks!!

8

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

1 Like
9

@healhana

thanks for confirm

yes is possible to upload different mobile image to customization code

1 Like
10

How would i go about doing this?

Thanks!

1 Like
11

@healhana

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

12

Hello,

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

Thank yoU!!

1 Like
13

@finnfeather

store url please

14

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?