I am an experienced developer & really can’t understand why Webflow can’t remember visibility settings or classes across breakpoints.
Desktop
Element A - Visibility - Hidden
Element B - Visibility - Visible
Works fine. As soon as I switch to Tablet & update to
Element A - Visibility - Visible
Element B - Visibility - Hidden
The same overrides the desktop. Infinite loop. I have also tried using a hidden class with a property display:none. Same problem. Tablet overrides desktop, desktop overrides tablet.
hi @aseemg your issue is to not understanding how things like CSS works. In real “code only” applications you can toggle (dynamically add/remove) classes with help of javascript.
When you acknowledge your self about CSS you will know that CSS selectors(names) can have for property eg. display different value none(hide) or eg. block(show) in different viewports using media query.
Once selector is assigned it can’t be removed without JS, this is how it works in real life.
What this means that when you set class name hidden you only need to change its value on different viewport so class name should have some meaningful neutral name.
Anyway, you actually do not need selector class name hidden , you only have to set section to display: none in WF UI on tablet. In this case will be hidden from tablet down but shown on desktop (main viewport) and above.
hi @aseemg you already have all informations you need, so use them. Naming all components section and expect to hide only few you need a different strategy. It is very easy to achieve you are going after.
Aseem learn from the courses in Webflow university. It’s not complicated, but you won’t learn how to use Webflow properly by just pushing buttons.
Here are a few key points I can see you’re confused on-
When you assign a class to an element, you’ll see that class assigned at every breakpoint.
The styles defined for that class are breakpoint specific.
So if you create a class Desktop Section, and assign it to that section, you’d then;
go to the desktop breakpoint, and style it the way you want it to to appear on desktop
toggle to the tablet breakpoint and override the display style to none
This will cascade to mobile landscape and portrait as well
All elements assigned that class are affected, so make certain to choose where you apply your classes. Changing the visibility of your Section class will affect all of them. Duplicate it first if you want to make a variation.
And later, once you have these concepts down, learn about combo classes which give you even more control.
We ran into this question with a client project and created a script to show or hide any desired element based on the device, OS or browser being used by the site visitor.
Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.
If there are any questions please feel free to tag me!
