Hidden v. Visibility

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.

‍

‍