Hi @caddycaps
Which theme you are using for your store?
On here I have made a guide for the Dawn theme, so I hope it helpful for you
https://www.youtube.com/watch?v=uGtL02KI1LE
Topic summary
Different banner images for mobile vs. desktop in a Shopify store (Store Design, CSS). Goal: have a mobile-optimized banner while using a different desktop image.
Proposed approach: add two banner sections and use CSS media queries to show/hide each based on viewport width. For mobile, hide the desktop section with a max-width rule; for desktop, use a min-width rule. This relies on targeting the specific section ID (e.g., #shopify-section-…), and is a common method across themes.
Resources: a YouTube guide for the Dawn theme was shared. The requester uses the Refresh theme and asked if the method applies similarly.
Current status: the hide/show solution works; the desktop image adapts correctly, but the mobile image does not adapt/responsive as intended. The requester is seeking a fix for mobile image adaptation.
Key terms: CSS media queries (rules applied at specific screen widths) control which banner is visible. Code snippets are central to understanding the solution. Resolution: not yet; pending guidance on mobile image responsiveness and theme-specific differences (Dawn vs. Refresh).