How to Hide Sections on Mobile?

Store Design
,

Topic summary

A user seeks to hide a wave graphic element that displays differently on mobile devices, wanting to replace it with a mobile-specific version.

Solution Provided:

  • Use CSS media queries to hide the element on mobile viewports
  • Add custom CSS code to Shopify’s base.css file via Online Store > Themes > Edit code
  • Target the wave element using its class attribute with display: none inside a media query

Technical Details:

  • Standard mobile breakpoint is 768px max-width
  • Breakpoints range: 576px (small), 768px (medium), 992px (large), 1200px (extra-large)
  • Two CSS solutions offered: one targeting elements with class starting with “wave-body-template” and another targeting a specific Shopify section ID

Outcome:
The user successfully implemented the CSS code and confirmed the wave element disappeared on mobile. The issue is resolved.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
7

For mobile and tablets break points start from 768px

  • 576px (small)
  • 768px (medium)
  • 992px (large)
  • 1200px (extra-large)
1 Like