Modal disappearing on responsive states (+ Javascript)

Design help General
1

Hey everyone, we’re having issues with the responsive behavior of a modal. On our website here: https://crescolabs-staging.webflow.io

The user should be greeted with an age-gate modal at all breakpoints. Only when the user checks the checkbox and hits Enter should the modal disappear.

But we’re having an issue where the modal completely disappears if you scale your browser to another breakpoint.

We do have some javascript in the custom code that does a cookie check on load to make sure the user doesn’t see the modal again for 20 minutes after entry. In the CSS, we have the modal hidden by default so the javascript will only show it if the cookie says to. That cookie javascript looks like this:

<!-- AGE GATE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
  $(document).ready(function(){
  if (!$.cookie('alert')) {  
    $('.section-agegate').show();    
    var date = new Date();      
    date.setTime(date.getTime() + 20 * 60 * 1000); // expires after 20 minutes
  
    $.cookie('alert', true, { expires: date });
   }
});
</script>

Could the CSS to hide the modal by default be overriding the javascript when you switch to another breakpoint? If so, any ideas for a fix?

Help is greatly appreciated. Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)