Oh, I see why it doesn’t work. The other code you added it interfering with mine and it’s causing chaos. You should ideally pick either or, please don’t go and add both. Can you remove the other one you added and put mine back, that way I know what I wrote and I can fix it
Topic summary
Users report image banner and slideshow cropping issues on mobile devices when using the Crave Shopify theme, while desktop displays correctly.
Primary Solution Provided:
- Add custom CSS code to theme.liquid file (below
<head>tag) - Code targets mobile viewport to adjust image aspect ratio and object positioning
- Initial solution required editing to apply mobile-only styling
Implementation Challenges:
- Code conflicts occurred when users combined multiple CSS solutions
- One user successfully resolved cropping but created unwanted blank space beneath slideshow
- Recommendation: Use only one CSS solution at a time to avoid interference
Additional Related Issues:
- Button positioning/sizing inconsistencies between desktop and mobile
- Hamburger menu not opening on mobile (Samsung/Edge browser)
- Missing product page images
- Header image cropping
- Desire to use different images for desktop vs. mobile slider views
The thread remains active with multiple users seeking variations of the mobile image display fix.