God bless people like you 
Topic summary
Issue: On Shopify’s Refresh theme, a portrait slideshow image (2160x3840) looked good on mobile but not on desktop. The goal was to serve separate images for mobile and desktop.
Proposed approach: Create two slideshow sections—one with a desktop image (e.g., 3840x2160) and one with a mobile image. Then hide/show each via CSS media queries based on viewport width, added at the end of base.css.
Key fix: The initial CSS used min-width for both queries, causing both images on mobile and none on desktop. Correct solution used min-width: 750px to hide the mobile section on desktop, and max-width: 749px to hide the desktop section on mobile. The CSS targets specific section IDs, so it applies only to those sliders.
How to get IDs: Inspect the page in the browser (right-click > Inspect) to find each slider’s section ID. Update IDs if sections change or new ones are added.
Outcome: Worked for the original poster after the media query correction. A later participant reported it not working on their store; no further details or resolution provided, so that follow-up remains open.
1 Like