Site Designer Guide
responsive visibility display none breakpoints hide show

Hide and show elements at breakpoints

Sometimes the right responsive strategy is not to rearrange an element — it’s to replace it with a different one. You can hide any element at a specific breakpoint and show a different element in its place, keeping your layout clean and purpose-built at every size.

Hiding an element at a breakpoint

  1. Enter breakpoint mode

    Click the breakpoint mode toggle and choose the breakpoint where you want the element hidden — for example, Mobile (480 px).

  2. Select the element

    Click the element on the canvas or select it in the Outline pane.

  3. Set display to none

    In the Style pane, find the Display property and set it to none.

  4. Exit breakpoint mode

    Click the breakpoint mode toggle to exit. The element is now hidden only at the mobile breakpoint.

The generated CSS looks like this (in desktop-down mode):

@media (max-width: 480px) {
  .desktop-nav { display: none; }
}

Showing an element that is hidden by default

To show an element only at a specific breakpoint, set display: none in your base styles first, then enter breakpoint mode and set the display value to whatever the element needs — block, flex, grid, etc.

/* Base: hidden on desktop */
.mobile-menu-button { display: none; }

/* Mobile: show it */
@media (max-width: 480px) {
  .mobile-menu-button { display: flex; }
}

The “hidden at breakpoint” indicator

When you select an element that has a display: none override at any breakpoint, Site Designer shows a small eye-with-slash badge in the Outline pane next to that element. Hovering over it shows which breakpoint(s) the element is hidden at, so you never lose track of conditional visibility rules buried in your styles.

Common use cases

Desktop navigation → hamburger menu on mobile

The desktop nav (<nav>) gets display: none at the mobile breakpoint. A hamburger button element gets display: flex at the same breakpoint. Both exist in the HTML; only one is visible at a time.

Decorative images on desktop, hidden on mobile

Large decorative images that enhance a desktop layout often just waste space on mobile. Hide them at the mobile breakpoint to reduce visual clutter and improve performance (note: display: none still downloads the image — see Picture element if you need to skip the download entirely).

Mobile-only CTAs

A sticky “Call us” button at the bottom of the screen makes sense on mobile but is redundant on desktop where a full navigation is visible. Add the button, set it to display: none in base styles, and show it only at the mobile breakpoint.

Framework utility classes

If you’re using a CSS framework, it ships its own visibility utilities:

  • Foundation: .show-for-small-only, .hide-for-medium, .show-for-large
  • Bootstrap: .d-none .d-md-block (hide at all sizes, show at medium and up)

You can apply these classes via the Classes field in the Inspector pane. They work alongside — or instead of — direct display overrides in breakpoint mode.