Control device-based visibility in Webflow.
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.
Here’s the problem: CSS-based visibility of elements doesn’t always work that way. The industry standard is to use display: none. Want something to show up on desktop and tablet, but not on mobile devices? Just go to mobile landscape and set the class’s styling to display: none. Visible on desktop and tablet. Not at all rendered on mobile landscape or mobile portrait.
The other problem with having visibility split like this (existing in the style panel and in element settings) is that there are two sources of truth. Very, very, very often, we’d receive questions about why an element wasn’t showing up. How often? Would it be an exaggeration to say there were over a million tickets on this exact issue? Yes, that would be an exaggeration. But that’s the problem with having something set to display: none in one place, and then visible in another. The logic doesn’t always work out, and you’re left with multiple sources of truth. Plus, this complexity can lead to other conflicts, like those seen when setting interactions that affect visibility.
So. If you’re looking to control device-based visibility? Use the device selection at the top of the Designer, and set the display setting on that class to display: none. Want it to be visible again on mobile portrait? You can go there and set it back.
But wait. What if we want to affect visibility per-element? (What if we don’t want every single element that has that class applied to disappear?) For this, there are a bunch of different ways to approach it. Probably the most straightforward one is to use a combo class.
Maybe for this, we can call it “hidden.” Once we do that, we can set it to display: none — and that’s it. Now only that element (or any other elements that have that combo class applied) will be hidden.
And that’s breakpoint-based visibility in the Webflow Designer.
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:
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.
Something went wrong while submitting the form. Please contact support@webflow.com