Safe area issues on iOS 26 on website using WordPress plus elementor pro

I have a website I’m working on that uses WordPress and element mentor pro. Basically everything is custom HTML in individual containers and custom CSS for each page.

The problem that I’m running into is there needs to be a pop-up and the easiest way to do that is just use the element or proper pop-ups however, the overlay is not extending into the safe areas on the bottom or top notch. I’ve been trying to figure out a way to fix this, and I cannot get it to work. I’ve tried having CSS in every imaginable way to get it to extend the overlay..

The other issue is for this website there is no header. It’s just a container that’s the hero content and for some reason that also will not extend into the top-notch safe area. It extends to the bottom notch just fine but not the top notch and there’s just a white bar there where I prefer it be the background gradient that I have set up for the hero however, nothing I do will get it to push into that top notch safe area either.

Hoping someone else had this issue and can help me out

Safe area issues on iOS 26 on website using WordPress plus elementor pro
 
 
Q