Can I hide elements on different screen sizes in Webflow?
TL;DR
- Use Webflow's Display setting in the Style panel to hide elements by setting them to "None".
- Apply visibility changes at specific breakpoints to control display for different screen sizes.
Yes, you can hide elements on different screen sizes in Webflow using the built-in visibility controls for responsive design.
1. Use Webflow's Display Settings
- Select the element you want to hide in the Webflow Designer.
- Navigate to the Style panel (right sidebar).
- Find the Display section under the Layout section (typically near the top).
- Click the eye icon next to the word “Display” to hide the element.
- Set the element’s display to “None” (hidden).
2. Choose Specific Breakpoints
- Use the breakpoint navigation at the top of the Designer (desktop, tablet, mobile landscape, mobile portrait).
- For each screen size, repeat the steps above to show or hide the element as needed.
- Webflow applies visibility settings per breakpoint, so your choice on one device size doesn’t automatically affect others.
3. Optional: Use Combo Classes for Advanced Control
- Create combo classes if you need multiple elements to have different visibility behaviors.
- For example, apply a base class like
Nav Linkand a comboNav Link Mobileto define display rules just for mobile.
4. Use Interactions Carefully
- If you’re also using interactions or animations, ensure they don’t conflict with elements marked as
display: none. - Interactions cannot animate elements that are fully hidden via display: none.
Summary
To hide elements on different screen sizes in Webflow, use the Display setting in the Style panel per breakpoint. This allows you to customize your layout for various devices without using custom code.