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.
24

Please try to update the code

  • Add this code to Custom CSS of mobile section.
@media (min-width: 750px) {
.banner { display: none; }
}
  • Add this code to Custom CSS of desktop.
@media (max-width: 749px) {
.banner { display: none; }
}