Whenever I utilize the keyboard shortcuts to move a window from one side of the screen to another and then minimize it either upwards or downwards, I find myself faced with an issue. I can accomplish this action by using the Windows key in combination with the Left/Right arrow keys, followed by the Up/Down arrow keys. Alternatively, when employing the mouse and positioning the cursor at any edge or corner of the window until a double-headed arrow appears, allowing for custom resizing.
I desire the white-container box (div) to always remain centered on the page.
To begin, I am attempting to design a login page that mirrors the example shown in the provided image, with the exception of the background:
https://i.sstatic.net/eMMhb.png
As my current screen resolution is 1920x1080p, I am uncertain whether my coding choices involving the div element or classes will function correctly across other resolutions.
Edit: The background picture I am utilizing is also 1920x1080p.
body {
background-image: url(../images/website-login-background.jpg);
background-size: initial;
background-repeat: no-repeat;
resize: initial;
font-family: Arial;
}
.white-container {
margin-top: 25%;
margin-left: 36%;
/* width: max-content; */
width: 28em;
height: 28em;
background-color: white;
text-align: center;
}
h1 {
padding-top: 2em;
font-size: 1.8em;
font-weight: normal;
}
.form-menu {
font-size: 1em;
height: 2em;
width: 100%;
text-align: center;
}
.input {
font-size: 1em;
height: 2em;
width: 80%;
}
.linkaAttr {
overflow: hidden;
color: blue;
padding-left: 50%;
}<body>
<div class="white-container">
<header>
<h1>Log In to Your Account</h1><br>
</header>
<form class="form-menu" action="#">
<input class="input" type="text" name="iD" placeholder=" Email or phone or username"><br><br>
<input class="input" type="password" name="pass" placeholder=" Password"><br><br>
<div class="linkaAttr">
<a href="#">Forgot password?</a><br><br><br>
</div>
<input class="input" type="submit" style="background-color: rgb(30, 151, 213); color: white" value="Log In"><br><br><br>
<p style="color: gray">Need an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>In my current setup, when I resize the window using keyboard shortcuts to manipulate its position, the option to scroll within the window becomes available, which is unnecessary. The white div is not fully visible, necessitating scrolling to view its entirety. Additionally, it fails to maintain its central alignment upon resizing the window in this manner.
In the desired outcome, the white container should occupy the minimum size possible on the page, remaining centered even during resizing done using the mouse. When utilizing the keyboard for resizing purposes, the div must be prominently displayed and centered regardless of the window size.