How to hide an element on mobile in Webflow?

Some design elements make sense on a large screen but clutter or break the layout on mobile. Navigation decorations, large background images, secondary content blocks — whatever the element, Webflow makes it straightforward to hide it on specific breakpoints.

Hiding Elements Using Display Settings

The cleanest way to hide an element on mobile is by changing its Display property at the target breakpoint.

1. Select the element you want to hide in the Webflow Designer
2. Switch to the mobile breakpoint in the top toolbar (mobile landscape or mobile portrait)
3. Go to the Style panel and find the Display setting
4. Change it from its current value (Block, Flex, Inline, etc.) to None

The element disappears from that breakpoint and all smaller ones. It remains fully visible on larger breakpoints.

This method works on any element — divs, images, text blocks, sections, or entire layout containers.

Hiding Elements on Tablet

The same approach applies to the tablet breakpoint. Switch to tablet view, select the element, and set Display to None. The element will be hidden on tablet and all smaller breakpoints.

If you want the element visible on mobile but hidden on tablet only, you need to override it: hide it at tablet, then switch to mobile and set Display back to its original value (Block, Flex, etc.).

Using Visibility vs Display

Webflow has two ways to make an element disappear:

• Display: None — removes the element from the layout entirely. Other elements fill the space it occupied.

• Visibility: Hidden — the element becomes invisible but still takes up space in the layout.

In most cases, Display: None is what you want. The element is gone from the layout, and the surrounding content reflows naturally. Use Visibility: Hidden only if you need to preserve the element's space — for example, preventing layout shift during an interaction.

Hiding Elements with Custom Code

For more granular control, you can use custom CSS in an HTML Embed or your site's custom code section:

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

Apply the class hide-on-mobile to any element, and it will be hidden on screens 767px and below. This approach is useful when you need precise control over the exact pixel breakpoint, or when managing many elements with a single rule.

Showing Mobile-Only Elements

The reverse works the same way. To show an element only on mobile:

1. Select the element at the desktop breakpoint and set Display to None
2. Switch to the mobile breakpoint and set Display to its intended value (Block, Flex, etc.)

This pattern is common for mobile-specific navigation menus, simplified hero sections, or touch-optimized UI components.

Key Takeaways

• Switch to the target breakpoint and set the element's Display to None

• Display: None removes the element from layout flow; Visibility: Hidden just hides it visually

• You can override Display settings at any smaller breakpoint

• Use custom CSS for breakpoint-specific hiding across many elements

• The same technique works in reverse for mobile-only elements