Hide elements on different breakpoints

Control device-based visibility in Webflow.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Formally, the Webflow Designer had element-specific options for setting display visibility.If you wanted something visible on desktop and table but not on mobile devices, you would turn off visibility for the rest.

But this means there are multiple sources of truth. 

To control device-based visibility, use the breakpoint selection at the top of the Designer and set the display setting on that class to display: none. To make it visible again, you can and set it back. 

To affect visibility per-element( say you don’t want every single element with that class to disappear:

  1. Add a combo class (e.g., “hidden” 
  2. Set it to display: none

Now only that element (or any other elements that have that combo class applied) will be hidden.

Learn more about styling across breakpoints

Learn more about triggers and animations on specific breakpoints.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top