Streaming live at 10am (PST)

Overlay disappears, when resizing browser

Hello Webflow-Forum

I’m currently working on a website (you’ll find the link below) where i try to make a sort of one-pager, by including multiple pages as div-blocks that are shown & hidden by a mouse-click interaction:

The problem i have right now is, when i open an overlay in the browser and resize the browser-window i gets hidden when a defined breakpoint is crossed.

Is it possible to make the overlay visible over multiple breakpoints? Maybe there is a script i dont know of that makes this possible?

Maybe is there better/easier technique to make it happen?

Thanks for your support

Hi @othernoise, thanks for your post, could you help to share the site read only link? That will help to check the overlay.

Learn how to share a project’s read only link: Share a read-only link | Webflow University

Thanks in advance

Hi @cyberdave

sure, here is the link:

Thank you for support!

Hi @othernoise, thanks for the read only link. It seems that in the design the About_us page has a custom style of display none.

When the window is resized, the css media query for the new viewport is set and the css for that viewport is changing the modal back to display none.

[edit]: When I test on a blank site, the fixed modal in my test which is set to display none on other viewports resizes ok and the fixed modal does not disappear when resizing, so I think there is something amiss in the styles on the page, I am continuing to check.

When I have further info on this, I will help to share that.

Hi @cyberdave

Thanks again for helping me out!

Ok, i tried again to fix the problem by setting the display to none. Unfortunately the modal still disappears when resizing.

What exactely could be missing in the styles? How did you solve the modal, so it work with you?

Hi @othernoise, I took a look and it seems there are multiple modals or other elements which are nested within other divs with transitions and or interactions, I would recommend to place all Fixed position elements directly under the body as fixed position elements are relative to the body.

Alternatively, you can position elements using Absolute position relative to the parent element having a Relative positioning.

When I tested, I did a simple test to see if two fixed elements under the body set to full page with different z-index would not disappear at the break points and that worked correctly.

I think there is something about how you are nesting fixed position elements in your design, I would move those/trigger those to show from directly under the body and each modal has it’s own z-index.