Streaming live at 10am (PST)

Visibility Control - Breaking Points Vanished?

Yup, I just went through the same thing. And funny, the panel appears and is available in places I used it before the warning sigm

@Matt_g explanation helps for sure…so thanks for that!

Just wondering if I slept through the announcement “and” if it’s still there some where

Perfect! My list of interactions is now so long I cannot remember the last time I seen the bottom of this panel.

Thanks @dram, super helpful.

I have just had a support response, any elements you currently have using this function will remain until you change / remove then the warning will appear and off it goes.

This thread has been very helpful, and the update is beginning to make perfect sense.

To clarify, for those elements still using it, these visibility settings will still be accessible.

However, after you disable this setting entirely (i.e. make the element visible for all breakpoints), the next time you come to this setting in the Designer you’ll be met with a note and those settings won’t be accessible.

We chose to deprecate this setting because there were quite a few bugs associated with the visibility settings and it was a bit too abstracted away from CSS (at least more so than most Webflow style settings). It was causing quite a bit of confusion for a lot of users. After some deliberation as a team, we decided to remove these settings in favor of using display:none in the Styles Panel.

Hope this helps clears up any confusions. :slight_smile:

3 Likes

Hi @dram, @Matt_g

I have made some updates to the interactions. However, if the desktop site is loaded and I resize the browser (or chose a different break point in the preview) this element is then visible on all (the interaction loads the element on desktop breakpoint and remains visible when resizing the screen)

Any suggestions?

That’s the drawback, yes. But since most of the time your visitors will not go resizing their browsers back and forth (I think mostly us designers do that when facing some interesting looking site to see the responsiveness, haha) it shouldn’t be much of a problem. But yeah, I’d love to have some kind of reinitialization in case of breakpoints crossing on the fly.

2 Likes

Good Day…

It would have been nice to get some warning or time to figure out what to do before it was shut off, sorry that is really not ok. the notice could have gone up days ago, not the moment it is changed, some of us learn as we go around here… that said

For those of us not so technically informed, could someone please explain how this is accomplished in detail, maybe a few photos, as I cannot get it to take display:none because of the ( : ) … thanks, as I do my mobile pages separately this is a bummer for me instead of 1 click, now its…

thank You

2 Likes

Function is deprecated

image

Now you need to select device type and display:none

Miekwave… Thank You I get it now it was a button not something I needed to enter

they should have left sites that already had it in use alone, now 2 different systems in the same project…oh well

thanks again

Hi @TimPhillipsDesign,

Any section that currently uses the visibility function will still use this until you make that section visible on all - then the notification is displayed and function removed.

Thanks

Not much you can do there, but keep in mind it would be rare that an external viewer would load the site in a certain window size and the resize (not impossible but rare).

Alternatively, you could rework things so that this interaction would only trigger on the desktop and the object this interaction makes visible, is only visible on the desktop. So if someone loads the site in their desktop, triggers the interaction to make the object visible, but then resizes the screen to a smaller break point, the object will then been hidden as the new media queries take hold.

If I am understanding your intention correctly.

Matt G

Hi @Matt_g

This is what I had been trying to do yesterday evening and for some reason the element that I only wanted to be visible on desktop also shows on the other break points once it has loaded (even though it is display:none for the others).

If you could take a look at fountech.ai - the .welcome div is visible (after resizing from desktop to mobile),

Anything thoughts would be much appreciated.

Thanks

Darren

Would be easier if you shared the webflow link.

Sorry @Matt_g - assumed it was in the initial post (now updated).

I couldnt agree more with post above.

Some of us are using Webflow to earn money, and having your workflow disrupted suddenly without prior notice is just rude in my opinion. I also was building Mobile versions seperatley and having 1 button to do this was great, and now we must manually go thorugh all elements we want to adjust?

I understand the fact there were bugs, and you are trying to improve the product, but this is not the correct way to do things.

This scenario also buggy. You hide element X than you bring it back by “display: block” but the correct display in your design is “display: inline-block” or “display: flex”.

The main idea her - in “real life” you hide/show a lot of elements (In stage mode).

Give me option. If i dont use interaction-2 in project X i want “easier life”. This idea is not “panel feedback” - to force users to change the way they work for some bugs in animation (And to “kill” valid CSS property).

If someone hides element by the editor (visibilty hidden) and than try to show this element by interaction and other “wrong” planing of animations and base CSS mistakes - That’s his problem, not mine.

I too prefer buttons for regular display options and expand for advanced stuff.
Speed of use being a major asset for webflow, the heavy usage elements should stay visible and easily selectable.

I really loved the ‘display on device’ buttons, would love it if they didn’t go. We can use ‘display: none’ but this was so easy! Use them all the time for effects that would be lost on mobile or the other way round

1 Like

I Agree, however after reading the thoughts in this post it was a sloppy / lazy solution. I think going forward it’s much better for everyone and will encourage better practice (but yes, it was very handy!).

For those of us who dont do this for a living and just make our own website, this wasted time looking for those buttons, trying to understand why I couldnt get them to appear anymore