Hi guys,
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: Overriding !important with css or jquery - Stack Overflow 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/
Thanks,
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