Mobile Keyboard pushes content out of the screen

Design help General
1

Hi,
I have a problem with a form when viewed from my mobile device (Samsung S10e): When I click on an input field, the keyboard pushes all the content up and partly out of the screen. But I want the keyboard to go over the content, and just push up an input field if it would be underneath it.

You can get to where the form is by opening the nav menu, then clicking on “GET STARTED” and then on “Contact us”. Here is the published link: https://interactive-papers-awesome-project.webflow.io/

I know the modal wasn’t created in a very professional way, so maybe there is a problem with the the z-values or position?
Would appreciate any help in solving this issue :slight_smile:

Here is a screenshot of how it looks like on my phone:

WhatsApp Image 2020-09-21 at 11.41.23
WhatsApp Image 2020-09-21 at 11.41.23757×1600 56.7 KB

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

2

Found a passable solution, if anyone else has this problem: I gave the content-wrapper, that was pushed upwards a max-height of 100% and gave it the property ‘justify: start’ in the layout section. That way, if it gets pushed up, the keyboard pushes the content to the upper border of the screen, and then goes above the lower content.