You spend hours perfecting a giant, majestic hero banner. It looks Oscar-worthy on your laptop.

Then you check it on your phone… and it looks like a digital car crash. The text is squished, the image is cropped weirdly, and it takes up three screens of scrolling.

The solution? Well, you can hide it.

Sometimes, you need things to exist on a desktop but vanish on a phone (or vice versa).

Now, you could install a heavy plugin to handle this. You could also use a chainsaw to cut a slice of cheese. But today, we are going to do it the clean, and lightweight way.

No bloat. No updates. Just a tiny sprinkle of CSS magic.

Step 1: The Code

First, we need to teach your website three simple rules.

Depending on your theme, the “CSS box” hides in one of two places.

• Option A (Block Themes): Go to Appearance > Editor, click the Search icon (⌕) in the top left corner, type “Additional CSS,” and click the result.
• Option B: Go to Appearance > Customize > Additional CSS.

Once you have that box open, simply paste this snippet inside:

/* Hide on mobile devices */
@media screen and (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Hide on tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hide-on-tablet {
    display: none !important;
  }
}

/* Hide on desktops */
@media screen and (min-width: 1025px) {
  .hide-on-desktop {
    display: none !important;
  }
}

This is the only “coding” you have to do today. I promise.

Step 2: How to use it

Now that the rules are set, you can make anything disappear whenever you want. This works for any block including groups, and columns.

1. Click on the element you want to hide (e.g., that giant image).
2. In the right sidebar (Settings > Block), scroll down to Advanced.
3. Find the box labeled Additional CSS class(es).

Now, type in your magic word:

• To banish it from phones: hide-on-mobile
• To banish it from tablets: hide-on-tablet
• To banish it from laptops: hide-on-desktop

Boom. Gone.

(Note: If you hide it on the device you are currently using, it will disappear immediately. Don’t panic, it’s still there in the backend!)

When should you use this?

Well, there are several use cases. Here are some:

• The Heavy Background: Keep the 4K video background for desktop users, but serve a lightweight static image to mobile users to save their data plans.
• The Data Table: massive tables look terrible on mobile. Hide the table on mobile, and show a “Download PDF” button instead.
• The Sidebar Shuffle: Sidebars are great on laptops, but on phones, they get pushed to the very bottom of the page, forcing users to scroll past miles of content to find them. Use hide-on-mobile to vanish the sidebar on phones, keeping the reading experience clean.
• The “Download App” Nudge: If you have a mobile app, it’s annoying to show “Download our App” to someone sitting on a desktop computer. Use hide-on-desktop so that the download button only bothers the people who can actually install it.

“Can’t I just click a button?” (The Alternatives)

I know what some of you are thinking: “It’s the future, why am I pasting code?”

No gatekeeping here! Depending on your setup, you might already have a button for this.

If you are using heavy-hitters like Elementor, Divi, or Beaver Builder, check your settings. You probably already have these responsive toggles built-in. If you have those tools running, go use them! No need to reinvent the wheel.

Or, if you are using a modern Block Theme and your hosting setup allows you to install plugins (like the WordPress.com Business plan or a self-hosted site), you don’t have to touch CSS if you don’t want to.

There is a brilliant little 100% free plugin called Block Visibility.

It adds all these controls (and way more) right into your block settings with nice visual toggles. If you prefer clicking checkboxes over copy-pasting code, this plugin is the gold standard.

So, why use the code method above?

Because it is the “Zero-Calorie” solution.

Plugins are great, but sometimes you just want a lightweight fix without adding another tool to your dashboard. The CSS method is universal, it’s free, and it works on every site, regardless of your plan.