Hide elements on different breakpoints

Control device-based visibility in Webflow.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Transcript
This video features an old UI. Updated version coming soon!

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.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-
This video features an old UI. Updated version coming soon!