Верхняя часть моего сайта исчезает, когда я изменяю размер по вертикали

Question

Я пытаюсь создать отзывчивую страницу входа для колледжа, но когда я изменяю размер окна по вертикали, lo go и в основном верхняя часть исчезают.

В настоящее время я проектирую для iPhone 7, используя инструменты разработки в Google Chrome, чтобы помочь мне с представлением. Когда я открываю веб-сайт на своем телефоне Huawei и нажимаю поле пароля, клавиатура перемещает страницу вверх, и lo go частично исчезает. Это не происходит на моем iPhone.

Я думаю, что проблема где-то в моих элементах div. Извините, если это глупый вопрос, я новичок.

Сайт: https://borislav1333.000webhostapp.com/

body
{
	margin: 0;
}

img
{
	max-width: 300px;
	position: absolute;
	top: 60px;
	left: 37px;
	z-index: 1;

}

.container
{
	width: 375px;
	height: 667px;
	background-color: white;
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: Georgia;
}

.form-back
{
	width: 200px;
	background-color: white;
	z-index: 1;
	margin: 0 auto;
	padding: 45px;
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -80%);
	text-align: center;
	font-size: 18px;
}


input[type=text], input[type=password]
{
	width: 100%;
	padding: 10px;
	margin: 8px 0px 8px;
	border: solid 1px #aaa;	
	border-radius: 4px;
}

button
{
	width: 100%;
	height: 50px;
	border: none;
	border-radius: 30px;
	border-color: white;
	background-color: #e52791;
	font-family: Georgia;
	transition: background-color 0.7s ease-out;
}

button:hover
{
	background-color: #02356a;
	color: white;
	transition: background-color 0.7s ease;
}

.submit
{
	position: relative;
	top: 30px;
}

::placeholder
{
	font-family: georgia;
}

Answer 1

Согласно вашему коду вы использовали абсолютное значение позиции во многих элементах. Я думаю, что эта проблема, с которой вы сталкиваетесь, происходит из-за этого абсолюта. Я обновил ваш CSS код и добавил фрагмент ниже. Замените его и проверьте, я sh проблема будет решена:

         body
          {
              margin: 0;
          }

          img
          {
              width: 100%;
              max-width: 300px;
              z-index: 1;
              margin: 0 auto;
          }

          .container
          {
              margin: 0 auto;
              font-family: Georgia;
              text-align: center;
          }

          .form-back
          {
              width: 100%;
              
              background:transparent;
              margin: 0 auto;
              padding: 45px;
              text-align: center;
              font-size: 18px;
          }


          input[type=text], input[type=password]
          {
              width: 100%;
              padding: 10px;
              margin: 8px 0px 8px;
              border: solid 1px #aaa; 
              border-radius: 4px;
          }

          button
          {
              width: 100%;
              height: 50px;
              border: none;
              border-radius: 30px;
              border-color: white;
              background-color: #e52791;
              font-family: Georgia;
              transition: background-color 0.7s ease-out;
          }

          button:hover
          {
              background-color: #02356a;
              color: white;
              transition: background-color 0.7s ease;
          }

          .submit
          {
              position: relative;
              top: 30px;
          }

          ::placeholder
          {
              font-family: georgia;
          }