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
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; }
}
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
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?
Please change .hero__container to .hero and check again
That worked, thank you so much!
You are very welcome!
I love you dude
