How to Hide a Text Element on Mobile Devices in Bricks Builder

Sometimes, you want to hide specific elements like a language switcher on mobile devices to keep the layout clean or reduce visual noise. Luckily, Bricks Builder makes this very easy – though honestly, I didn’t spot the option right away when I first looked for it. Here’s how you can do it using two simple methods.

Method 1: Use Built-in Visibility Settings in Bricks

The easiest way is to use Bricks Builder’s built-in visibility options:

1. Select the element you want to hide (e.g., the one with the class .language-switch).
2. In the left panel, go to Layout.
3. Scroll down to the Visibility section.
4. Enable Hide on Mobile.

This will automatically hide the element on screens smaller than 768px, which includes most smartphones.

Method 2: Use Custom CSS with a Media Query

If you prefer full control via CSS, or want to define custom breakpoints, use this snippet:

@media (max-width: 767px) {
  .language-switch {
    display: none !important;
  }
}

You can place this under Theme Styles > Custom CSS or inside the element’s Custom CSS field in Bricks.

Adjusting for Larger Breakpoints

The example above targets mobile devices only. If you want to hide the element on tablets or smaller laptops too, just increase the max-width value:

@media (max-width: 991px) {
  .language-switch {
    display: none !important;
  }
}

This will hide the element on devices up to 991px wide, which typically includes tablets in portrait mode.

Conclusion

Hiding elements in Bricks Builder is really straightforward once you know where to look. Whether you use the built-in visibility settings or write a quick media query, both methods give you clean, responsive control over your layout. And yes – it’s obvious in hindsight, but I definitely missed it the first time too.