Remove Zurb Foundation Inline Styling

Question

I'm actually working on my website and trying to implement a modal. Since I'm using Foundation, I wish I'd be able to use the included 'reveal' plugin so I don't have to build the thing...since I don't know much about JS.

The implementation was easy until I looked at the mobile view and noticed the modal is going full screen. Wish I'd like to avoid. After battling with the CSS I realise Foundation is adding an inline style:

<div class="reveal" id="noChroma" style="top: 0px;">

Notice the "top:0px" that is added probably from the "foundation.js". I don't want to mess with this file.

Is there a way I can bypass this style and force mine, like "top:70vh"? I tried "!important" but the javascript always wins.

You can see it here

Thank you for your help, Best,

Quentin

Answer 1

If you trigger the modal on a browser and resize, it seems to be working. But if you trigger the modal while already at mobile size, then the JS overwrites the !important. – Quentin Beau Kwint

I can't reproduce this behavior. (screenshot)

The !important css wins here. Even if i reload the site and trigger again.