Looking for some help with creating a responsive log in page for a college. I'm encountering an issue where the logo and top part of the page disappear when resizing the window vertically.
Currently, I am working on designing for an iPhone 7 using Google Chrome's dev tools for reference. When testing the website on my Huawei phone, tapping the password field causes the keyboard to push the page up and partially hide the logo, which doesn't occur on my iPhone.
I suspect the problem lies within my div elements. Apologies if this is a basic question, as I am still a beginner in web development.
For more context, here is the link to the website:
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;
}<div class="container">
<div class="img"><img src="logo.jpg"></div>
<div class="form-back">
<form action="message.html" onsubmit="return validation()">
<div>
<label for="accountNum">Metric Number</label><br>
<input type="text" id="accountNum" name="accountNum" placeholder="Metric Number..."><br>
</div>
<div>
<label for="surname">Password:</label><br>
<input type="password" id="surname" name="surname" placeholder="Password..."><br>
</div>
<div class="submit">
<button type="submit">Log In</button>
</div>
</div>
</div>