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

Solved
Highlighted
Tourist
17 0 2

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!

0 Likes
Highlighted

Hello

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
17 0 2
0 Likes
Highlighted

This is an 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;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
17 0 2

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!

0 Likes
Highlighted

This is an accepted solution.

@SuzieQ,

Add below CSS

@media screen and (max-width: 640px) {
.ImageHero__Image.ImageHero__ImageWrapper--hasOverlay {
	background-position: center top !important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
17 0 2

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

0 Likes