Header Banner isn't responsive - yet other Banners are...

[SuzieQ]

Hey!

I'm using Prestige and my site has a top banner (full width) and boxes below.

I've changed the code so that the boxes show on mobile (via Shopify forum and Google forum)

<meta name="viewport" content="width=device-width, initial-scale=1">

 But the header still isn't scaling.

Does anybody know how I can solve this?

Thanks!

[oscprofessional]

Hello SuzieQ,

Please share your site url so that I will give you exact solution

[SuzieQ]

Thank you!

It's,

https://www.pantofoladorostore.it/

[oscprofessional · Accepted solution]

@SuzieQ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (max-width: 640px) {
#section-1569574527070 .ImageHero {
min-height: 380px !important;
}
}
@media screen and (max-width: 480px) {
#section-1569574527070 .ImageHero {
min-height: 280px !important;
}
}

[SuzieQ]

Thank you! The text resizes but the Image is still becoming hidden underneath the "Worldwide Delivery" banner.

Do you have any suggestions to ensure that we see the model's head in the image?

Thanks so much for helping with this!

[oscprofessional · Accepted solution]

@SuzieQ,

Add below CSS

@media screen and (max-width: 640px) {
.ImageHero__Image.ImageHero__ImageWrapper--hasOverlay {
	background-position: center top !important;
}
}

[SuzieQ]

SUCCESS! Thank you very much for spending time helping me :)