Hero image way too large on mobile - Savor theme

[smnrdesign]

Hi there, I'm using the Savor theme and my hero image is fine on desktop but when I view it on mobile it's way too large and most of it gets cut off. I'm also having a problem where the "Icons with text" section isn't showing vertically on mobile. Any input is appreciated. Thanks!

Link to my site is https://www.smnrdesign.myshopify.com

[Dan-From-Ryviu]

Hi @smnrdesign 

You can create another hero image section to use a different image for mobile. Then, add code to the Custom CSS of each section to hide the desktop section on mobile and vice versa. 

Add this code to the Custom CSS of the desktop hero section.

@media (max-width: 749px) {
.hero__container { display: none; }
}

Add this code to Custom CSS of the mobile section. 

@media (min-width: 750px) {
.hero__container { display: none; }
}

[smnrdesign]

Thank you, that has worked for the most part. The only issue now is that it displays a big red block where the other hero image is. Any way to get rid of that on each view?

[Dan-From-Ryviu · Accepted solution]

Please change .hero__container to .hero and check again

[smnrdesign]

That worked, thank you so much!

[Dan-From-Ryviu]

You are very welcome! 

[samski12]

I love you dude

[Perennial]

Hi,

I hope you’re doing well.

Generally, the hero image for desktop and mobile are different. Please use a different image for mobile 

If you face any problem 

Feel free to reach out