Key takeaways

The Theme Editor may already have per-section visibility toggles — check section settings first.

CSS display: none inside a @media (max-width: 767px) block hides any element on mobile.

Add custom CSS to assets/base.css in your theme’s code editor.

Fudge can add responsive visibility to any element without you writing CSS manually.

Desktop layouts often include decorative elements, detailed sidebars, or secondary content that clutters the mobile experience. Hiding that content on small screens is a standard responsive design technique — and it’s easier than most people think.

When to hide content on mobile

Before hiding anything, ask whether you’re solving the right problem. Hidden content still loads — it’s just not visible. If you’re hiding large images or complex widgets, consider whether they should be loaded at all on mobile for performance reasons.

Good candidates for mobile hiding:

Decorative desktop-only illustrations or icons
Secondary navigation menus that duplicate the mobile hamburger menu
“As seen in” logo grids that take up too much vertical space
Desktop-only instructional text (“hover over the image to zoom”)
Large data tables that should be replaced with a mobile-friendly alternative

Method 1 — Theme Editor section settings

Start here before touching code.

Step 1 — Open the Theme Editor. Go to Online Store → Themes → Customize.

Step 2 — Select the section or block you want to hide on mobile.

Step 3 — Look for visibility settings. In the right-hand settings panel, some themes include options like:

“Hide on mobile”
“Show on desktop only”
“Device visibility: Desktop / Mobile / Both”

If the toggle exists, switch it and verify using the mobile preview (phone icon at the top of the editor).

Method 2 — CSS media query (the universal approach)

If your theme doesn’t have visibility toggles, CSS is the reliable solution. This works for any element — sections, blocks, individual HTML elements — and doesn’t require a developer.

Step 1 — Find the element’s class. In your browser, right-click the element you want to hide → Inspect → note the class name on the outermost element (e.g., announcement-bar, section-rich-text, logo-bar).

Step 2 — Open your theme’s CSS. Go to Online Store → Themes → Actions → Edit code → open assets/base.css.

Step 3 — Add a media query at the bottom of the file:

@media (max-width: 767px) {
  .your-element-class {
    display: none;
  }
}

Replace .your-element-class with the actual class from Step 1.

Step 4 — Save and test. Resize your browser window below 768px wide, or use Chrome DevTools device emulation (F12 → phone icon) to confirm the element is hidden.

Always duplicate your theme before editing code. Go to Themes → three-dot menu → Duplicate.

Method 3 — Fudge for adding responsive visibility controls

If you want a proper solution that works through the Theme Editor without hunting class names, Fudge can add proper visibility settings to any section.

Describe it in plain English:

“Hide the desktop decorative banner section on mobile screens.”

Or:

“Add a show/hide on mobile toggle to our logo bar section.”

Fudge drafts the change for your review. Nothing goes live until you approve it.

Add responsive visibility controls without writing CSS.

Try Fudge for Free

How to change the mobile view in Shopify

The most common way to check your mobile layout is the Theme Editor preview:

Open Online Store → Themes → Customize
Click the phone icon at the top center
Navigate through your pages to review mobile rendering

For more accurate testing, use Chrome DevTools (F12 → click the phone/tablet icon in the toolbar). This lets you select specific device sizes and interact with the page as a mobile user would.

You can also use Shopify’s built-in mobile preview link — when viewing a page in the admin, some sections show a “Preview” link that opens a mobile-optimized view.

How do I hide a section on mobile in Shopify?

To hide a full section on mobile:

Check if your theme has a “Hide on mobile” toggle in the section settings (easiest)
If not, find the section’s CSS class using browser Inspect tools
Add display: none inside a @media (max-width: 767px) block in assets/base.css

The media query breakpoint of 767px is the standard Shopify Dawn theme breakpoint. Some themes use 749px or 990px — check your theme’s existing CSS to match the convention.

Hiding vs. removing content

Hiding with CSS keeps the content in the HTML — it just doesn’t display. This is fine for decorative elements but not ideal for:

Content that slows down page load (large images, video iframes)
Content you never want on mobile (use a separate mobile section instead)

For performance-sensitive content, the better approach is conditional Liquid rendering — only outputting the HTML when the user is on desktop. This requires code changes in your section’s Liquid file, which Fudge can handle.