Conceal elements on varying screen sizes

Control device-based visibility in Webflow.

Previously, the Webflow Designer included specific choices for individual elements to adjust their visibility on different screen sizes. If you wished to make something visible on desktop and tablet but not on mobile screens, you would disable its visibility for the other screen sizes.

However, this method resulted in having several sources of truth.

To manage the visibility based on screen sizes, utilize the breakpoint selection located at the top of the Designer and set the display property of that specific class to display: none. To revert its visibility, you can simply reset it.

To impact visibility per element (for example, when you do not want every element with that class to disappear):

  1. Introduce a combo class (for instance, “hidden”)
  2. Define it with display: none

Subsequently, only that element (or any other elements that have been assigned that combo class) will be concealed.

Explore more about styling across various screen sizes.

Discover more about triggers and animations tailored for specific screen breakpoints.

Ewan Mak
Latest posts by Ewan Mak (see all)