A user reported that their hero image displays correctly on desktop but appears oversized and cropped on mobile in the Savor theme. They also mentioned issues with an “Icons with text” section not displaying vertically on mobile.
Solution provided:
.hero__container with display: none at appropriate breakpointsIssue encountered:
After implementing the initial solution, large red blocks appeared where the hidden hero images were located on each view.
Final fix:
Changing the CSS selector from .hero__container to .hero resolved the red block issue.
Status: Resolved. The user confirmed the solution worked successfully.
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
