Search code examples
htmlcssmobilekeyboardcontact-form

Form Jumps up after Mobile Keyboard

I made a Mobile Responsive page using HTML, and CSS and I also added a Contact form, but when I am using it in mobile view, the mobile keyboard shows up, but the contact form goes up because the keyboard pushes it up.

My question is, how could I make this more appealing?

.modal-bg{
    position: fixed;
    top:-40px;
    bottom: 0;
    left: 0;
    width:100%;
    height: 125vh;
    background-color: rgba(0,0,0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0; 
    transition: visibility 0s opacity 0.5s;
  }
  
   .modal{
    position: relative;
    background-color: white;
    width: 40%;
    height: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    
  }



 @media screen and (max-width: 1024px) {

    /*mobile contact form*/
    .modal{
        width: 95%;
        height: 90%;
        z-index: 2;
      }

    .contact-form .message{
        max-width: 60%;
    }


    .modal-bg{
        z-index: 2;
    }
    
      }
<div class="modal-bg">
                <div class="modal">
                    
                    <form class="contact-form" id="contactformid" action="contactform.php" method="post">
                    <h2>Contact Us!</h2>
                    <label for="name">Name: </label> </br>
                    <input type="text" name="name" id="cname" placeholder="Your name">  </br>
                    <label for="email">E-mail</label> </br>
                    <input type="text" name="mail" id="cmail" placeholder="Your e-mail"> </br>
                    <label for="subject">Subject:   </label> </br>
                    <input type="text" name="subject" id="csubject" placeholder="Subject"> </br>
                    <label for="message">Message:   </label> </br>
                    <textarea name="message" class="message" id="cmessage" placeholder="Message"  rows="12" cols="50"></textarea> </br>
                    
                    <div class="g-recaptcha" data-sitekey="6LeWdswZAAAAAMZ95M__-qzoHYlSYJ3z-2brnlx3"></div>
                    <button class="cta-add" type="submit" name="submit" > SEND </button>
                </form>
                    <span class="modal-close">X</span>
                </div>
            </div>

Before and after the keyboard. enter image description here enter image description here

Solution

  • I added more height to it. It still jumps up, but it doesn't look bad after jumping up.