I'm using a webflow interaction to toggle between a full width list view and full width map view when on mobile. On the desktop view, the list view and map view appear side by side, but on mobile, the user can click on a 'MAP VIEW' link to
display: none the list and
display: block the map.
The only problem is that the default webflow behaviour adds a
display: none !important to the map on the class
.w-hidden-tiny which overrides my
display: block triggered with the IX.
Is there any way to override the
!important? I have looked at SO and found this: http://stackoverflow.com/questions/11962962/overriding-important-with-css-or-jquery which I would need to wrap in a JS media query, but I am hoping there is a simpler way?
My page can be found here: http://ph-search-results.webflow.io/
EDIT: Does this make sense to anybody or am I talking gibberish? Here is a quick screen capture of what I mean: http://quick.as/yjgvszndy