Блог

На изображениях ниже я считаю, что проблема не требует пояснений. Содержимое отлично работает до тех пор, пока не попытается ввести текст. Буду признателен за любые советы о том, что является причиной этого. Извините, что изображения такие большие. Я удалил часть HTML-кода (логотип, меню и скрытую панель навигации) для удобства чтения

  <section class="contact-background" id="particles-js" >
</section>
    <section class="contact-page">
<div class="contact-container">
    <h1>Get In Touch</h1>
        <div class="border"></div>
    <p>I'll get back to you promptly</p>
    <form class="contact-form" action="contactform.php" method="POST">

        <input class="contact-form-text" type="text" id="name" name="name" placeholder="Full name" tabindex="1" required>
        <input  class="contact-form-text" type="email" name="email" placeholder="Your E-mail" tabindex="2" required>
        <input class="contact-form-text" type="text" id="subject" name="subject" placeholder="Subject" tabindex="3" required>
        <textarea class="contact-form-text" id="message" name="message" placeholder="Message" tabindex="4"></textarea>
        <button class="contact-form-button" type="submit" name="submit" value="Send">Send</button>

    </form>
</div>
</section>
  

     body{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;;
} 
  

 #particles-js{
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}
  

  .contact-page{
    height: 100%;
    width: 100%;
}
  

  .contact-container{
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  

 .contact-form{
    display: flex;
    max-width: 60rem;
    padding: 2rem;
    flex-direction: column;
    align-items: center;
}
  

В этом есть что-то общее с вашим использованием position: absolute; . Почему вы используете его для большинства элементов вашего контейнера?

Одна из проблем, которую я вижу здесь, связана с css contact-container, вы задаете высоту 100%, а содержимое должно быть в центре. Поэтому, когда ваша клавиатура находится на вашем окне просмотра, оно становится маленьким, и все содержимое, включая форму и h1, пытается оставаться в центре.

Ваш contact-контейнер имеет абсолютную позицию, поэтому он будет абсолютным для HTML-тега, а форма будет пытаться быть относительной к HTML, поскольку вместо contact-container содержит.

Попробуйте изменить положение contact-container на относительное.