Published
July 6, 2023
Updated
Webflow has two different ways to hide things, and they're very different from each other. What's the difference?
Display: none
On the style menu, you have the ability to mark an item as display: none.
You can set and change this style at specific breakpoints and although it's not visible, the actual element is still in the page code.
It's particularly useful for;
- Hiding and showing content at specific breakpoints so that an element is only visible on desktop, tablet, or mobile.
- Data and content that is used by scripts or interactions, but not by people.
- Elements which need to be hidden temporarily, but which are needed for certain interactions, like a pop-up modal.
Visibility: hidden
On the settings menu, you have a different Visibility setting.
While this was originally designed for conditional visibility relating to Memberships, it's a very useful feature in general. It applies to all breakpoints, and it removes the element completely from the page.
It's particularly useful for...
- Memberships conditional visibility, where you need a specific element to be visible or invisible depending on the whether a user is logged in or not.
- Completely hiding elements and entire sections that are incomplete.
- Removing elements that you don't want anymore. But... you might want again someday. Like a holiday hours popup.
