I’m trying to work out whether I am doing something wrong or it is simply a ‘feature’ of Webflow Interactions in its current form.
What I would like to do: Have 3 columns that display on Desktop and tablet, when it gets down to the 2 phone sizes I would like the 3rd column to be absolutely positioned and off the screen for an optimal experience on mobile. The 3rd column would then be accessible as an overlay when clicking on a link when in the mobile view.
I’ve set this up and it works successfully (links below) however it seems that the Webflow interactions, once invoked, seem to override the display and transform properties even when they are set to the correct position for the larger screen sizes.
On the mobile views I have set the 3rd column to be absolutely positioned and 100% right off the screen. When clicking a link it shifts it back to zero, but when hiding it again if I then switch to desktop or tablet view the column has shifted off the screen. Is this expected behaviour, even considering I have set the transform setting for that particular column and media query to be 0px on larger screens?
Any ideas how I can resolve this, is it a bug in the current interactions implementation or am I doing something wrong?
Here is my public share link: http://competency-mapping.webflow.io
And here’s the read only webflow project: https://preview.webflow.com/preview/competency-mapping?preview=40cfd86341fcbfdfcd74d6ab443685d4