How can I hide specific image banners on mobile or desktop views?

Store Design
, , ,

Topic summary

A user working with Shopify’s Dawn theme needed to display different chart images for desktop and mobile views—hiding the desktop version on mobile and vice versa.

Accepted Solution:
Dan-From-Ryviu provided CSS media queries to add to each image banner section’s Custom CSS:

  • Hide on mobile: @media (max-width: 767px) { .banner { display: none; } }
  • Hide on desktop: @media (min-width: 768px) { .banner { display: none; } }

Additional Issues Addressed:

  • iPad compatibility: Adjusted breakpoint from 768px to 767px for mobile hiding
  • Slideshow sections: Use .slideshow or slideshow-component instead of .banner
  • Performance concerns: Images still load in background; suggested lazy loading implementation via liquid file modifications
  • Stubborn sections: When Custom CSS fails, add code with section ID to theme.liquid file after <head> tag
  • Vessel theme: Replace .banner with .hero class

The discussion evolved from a simple hide/show request into troubleshooting various edge cases across different themes, devices, and section types. Multiple users confirmed the solution worked for their needs.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
14

Hi, this code is super, super helpful, but for some reason, the image completely disappears on iPad Air! Would you happen to know why this is happening? Thank you so much in advance!