Can I hide elements on different screen sizes in Webflow?
TL;DR
- Select the element, open the Style panel, choose the desired breakpoint, and set Display to None to hide it.
- Alternatively, use Device Visibility checkboxes in the Element Settings panel and verify across breakpoints.
You can easily hide elements on different screen sizes in Webflow using built-in visibility settings tailored for responsive design.
1. Select the Element
- Click on the element you want to hide inside your Webflow Designer canvas or Navigator panel.
2. Open the Style Panel
- Go to the Style panel (right-hand side) to access visibility settings.
3. Adjust Display Settings per Breakpoint
- Select the breakpoint (device icon at the top: Desktop, Tablet, Mobile Landscape, Mobile Portrait) you want to adjust for.
- Scroll to the Layout section and find the Display settings.
- Set Display to None to hide the element on that specific breakpoint. The options might include Flex, Block, Inline, and None — choose None.
4. Verify on Other Breakpoints
- Switch between other breakpoints to ensure the element only hides where desired.
- Webflow inherits styles: if you hide an element on a lower device view, it remains hidden on higher devices unless you override it.
5. Use the Visibility Settings (Optional)
- Webflow also offers specific visibility settings for devices:
- In the Element Settings panel, you can find Device Visibility checkboxes where you can directly set “Hide on Tablet,” “Hide on Mobile Landscape,” and “Hide on Mobile Portrait.”
Summary
You can hide elements on different screen sizes in Webflow either by setting Display: None on the desired breakpoint or by using the Device Visibility options in the Element Settings panel. Always double-check across breakpoints for proper behavior!