Fixed popup is cut off on mobile - html

Question

I'm creating a website that opens a popup when you click on a certain element. My popup is a with the following styling (simplified from what I actually have, but this shows the problem):
.popup {
position: fixed;
width: 75vw;
height: 85vh;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: gray;
overflow-y: scroll;
}
Now, it works perfectly on desktop: I get a scrollable popup that's 85% of the viewport, positioned correctly. Looks like this:
However, when I open the website on mobile, the popup is cut off at the bottom. Looks like this:
It should have some empty space at the bottom, just like on desktop.
I tried adding bottom margins and paddings, but nothing helps. I don't understand why this is happening. Also it's hard to debug because if I open it in mobile mode on desktop browser, everything looks correct. And when I created a CodePen with my code and opened it on mobile, it also showed fine. Please help.

Answer 1

I don't think your issue is with css at all and more about that bar at the bottom of the phone. I know you mentioned that you tried margin and padding and that wasn't working, but did you happen to do them on the paragraph element itself?
Underneath .popup, you can put .popup p {margin-bottom: 50px;}. This should solve your issue. You will have to play around with the distance from the bottom of the div to find what works for you.
.popup {
position: fixed;
width: 75vw;
height: 85vh;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: gray;
overflow-y: scroll;
}
.popup p {
margin-bottom: 50px;
}
or you could simply add a media query
#media only screen and (max-width: 800px){
.popup p {
margin-bottom: 50px;
}