Override !important when using Webflow Interaction

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? :slight_smile: Here is a quick screen capture of what I mean: http://quick.as/yjgvszndy

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.