I have a modal that appears when clicking a tour button on the homepage, but the modal disappears when the browser is resized. I’m not entirely sure if it’s happening at the breakpoints, but either way it would be great to have a solution for this.
Here is my site Read-Only: https://preview.webflow.com/preview/mx-deposit?utm_medium=preview_link&utm_source=dashboard&utm_content=mx-deposit&preview=df46ee00b0ed0c4cc44aec0624f1de54&mode=preview
Can you share a link to the live website?
mxdeposit.net is the live website.
I tried to recreate the problem and I could not.
So I deleted all elements and interactions are rebuild the exact interactions you have, and the modal window stays open when resizing.
plus, you have an unnessecarry display:none on the modal element on the tablet breakpoint.
My conclusion is that you have a conflict somewhere with all the interactions.
Thanks! I’ll play around and see what I can come up with. Not sure how you couldn’t reproduce it though. What browser are you using?
Why is the display:none not necessary on the tablet breakpoint?
I saw the problem on your project, just could not reproduce it in a new project of mine…
Because you already defined it on the 1st breakpoint. so it “trickles” down automatically
The problem though is that if I get rid of the display:none on all breakpoints other than the main one, the modal shows up immediately if the site is entered through that breakpoint. Should I create an interaction to hide the modal on the first breakpoint and have it not set to display:none by default?
That should’nt happen. It is not how CSS works…
I believe it is also a product of the conflict.
Right, I just had to reset the display on the other breakpoints, but it’s still happening. So perhaps it is some other conflict