Skip to content

Device Visibility

Every element in Falcon Builder has visibility controls to show or hide it on specific devices.

How It Works

In any element's General tab, you'll find the Element Visibility row:

[ 🖥 Desktop ] [ 📱 Tablet ] [ 📲 Mobile ]
  • Button highlighted (solid) → visible on that device
  • Button dimmed (outline) → hidden on that device

Click a button to toggle visibility.

Examples

Show on desktop only

[ ✅ Desktop ] [ ❌ Tablet ] [ ❌ Mobile ]

Use for complex data tables or large images that don't work on small screens.

Show on mobile only

[ ❌ Desktop ] [ ❌ Tablet ] [ ✅ Mobile ]

Use for a compact mobile navigation or a "Call Now" button.

Hide on mobile

[ ✅ Desktop ] [ ✅ Tablet ] [ ❌ Mobile ]

Use to simplify layouts on small screens by removing decorative elements.

Container & Column Visibility

Visibility controls also exist at the Container and Column level (in their respective settings panels). This lets you:

  • Show an entirely different layout section per device
  • Have a desktop sidebar column that doesn't appear on mobile
  • Use a mobile-only full-width column in place of a multi-column desktop layout

Implementation

Visibility is applied via Tailwind CSS classes (hidden, md:block, lg:block) generated from the visibility settings. No JavaScript required — pure CSS responsive hiding.

Released under the MIT License.