How to change sections visibility across breakpoints

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.

Please help.

Video recording - https://youtu.be/0NRrG6ZpxKk

Visibility hidden ( Settings tab ) and Display none ( Style tab ) are two different things.
Both are very useful, but they’re very different things.

Here’s a writeup I did that you may find useful.

Importantly, Styles can be overridden at each breakpoint, but Settings cannot.

Since you’re a dev, the underlying mechanic is-

  • Settings define how the element is published into the HTML, and in the case of Visibility, whether it is published.
  • Styles affect only the CSS and the browser determines which styles to apply via the CSS media queries.

Styles can be overridden at each breakpoint, but Settings cannot. - This is also not working.

Edit:

Desktop - no style.
Tablet - add class hide
Switch to desktop. Class hide is present.
Remove class hide
Gets removed from tablet as well.

Simply, I want to show an element on Desktop but not tablet. How do I achieve this? How complicated can this be?

Video - https://youtu.be/w3v9pXAnT2s


Desktop

Element A - class Hide applied
Element B.

This works fine. As soon as I switch to tablet & update to

Element A - class Hide removed
Element B - class Hide applied

This also changes the desktop. Why are not classes saved across breakpoints? I am going totally crazy.

Even simple styles are not working. Applying a style at a specific breakpoint overrides all breakpoints. What is going on?

Here’s the video - https://youtu.be/agI2VbQFnXE

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. :man_shrugging:

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.

@memetican @Stan
you only have to set section to display: none
There are 5 sections. Setting one section to display: none is hiding all sections.

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. :man_shrugging:

2 Likes

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.

2 Likes