After applying the code there’s no differences after I refresh it on my mobile.
Topic summary
A Shopify store owner is struggling with slideshow banner display on mobile devices. Using a 1600x500px banner, the image appears properly on desktop but shows excessive padding/whitespace on mobile, making it look too small.
Initial troubleshooting attempts:
- A support representative provided CSS code targeting
.banner__contentwithpadding: 20px 0to adjust mobile spacing - Multiple code variations were tested but failed to resolve the issue
Alternative approach discovered:
The user implemented a responsive slideshow solution in the slideshow.liquid file that displays different images for mobile vs. desktop. However, a new problem emerged: the mobile slideshow inherits the desktop image dimensions instead of displaying at its intended full size.
Current status:
The discussion ends with the user stating they found another solution to display separate images for desktop and mobile views, though the specific implementation details weren’t shared. The thread appears resolved from the user’s perspective, despite the original CSS solutions not working.