How would I make this div responsive - html

Question

first off i'd like to say that I am god awful at designing and using CSS, so I was wondering if I could get some help with making my div responsive. It is currently sitting at the middle of the screen which is working, however, it gets all squished in (width wise and height wise) when used on different screens. The text does also not change. Even when used on a 1080p monitor, it has scroll bars on, so i'm really stuck on how to style it. I have pasted the HTML and CSS below.
<div id="mainForm">
<form id="userForm" method="post">
<p id="userP">Username: <br>
<input id="Username" type="text" name="Username" placeholder="Username" onfocus="this.placeholder='';" onblur="this.placeholder='Username';">
<p id="passP">Password: <br>
<input id="Password" type="password" name="Password" placeholder="Password" onfocus="this.placeholder='';" onblur="this.placeholder='Password';">
<p id="emailP">Email: <br>
<input id="Email" type="text" name="Email" placeholder="Email Address" onfocus="this.placeholder='';" onblur="this.placeholder='Email Address';">
<p id="authP">Auth Code: <br>
<input id="auth2" type="text" name="Auth" placeholder="Auth Code" onfocus="this.placeholder='';" onblur="this.placeholder='Auth Code';"><br>
<input type="submit" id="submit" name="submit" value="Login"/>
<h4>Don't have an account? <a href="register.php" >Register!</a></h4>
</form>
</div>
CSS for the main DIV:
#mainForm{
width: 20vw;
height: 40vh;
background-color: white;
margin:auto;
font-family: Montserrat;
text-align: center;
align-items: center;
margin-top: 2%;
position: absolute;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
CSS for form elements:
#Username, #Password, #Email, #Auth, #auth2 {
border: none; border-bottom: 2px solid;
padding: 0.5%;
margin-left: 1%;
width:40%;
transition: width 1s;
-webkit-transition: width 0.8s;
text-align: center;
font-size: 16px;
}
#Username:focus, #Password:focus, #Email:focus, #auth2:focus {
width: 60%;
}
#userP, #passP, #emailP, #authP{
font-size: 20px;
}
#userP{
margin-top:15%;
}
Thanks.

Answer 1

first of all set the meta viewport tag in your head of HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
second of all use bootstrap framework which is totally responsive, then wrap your div in columns
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- your form goes here -->
</div>
</div>
</div>
inside <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> you can add more classes and alter their CSS property like max-width, min-width, margin-top etc.

Answer 2

You might want to just stick to using pixels instead of vw and vh with such a small window to work with. I would suggest a height and width of 300px (I checked and it looks alright concerning the content.)
As #Friday Ameh pointed out, usually you would want to work with media-queries, but in this case the size of the width isn't going to leave the screen because the smallest screensize (mobile) is usually around 350px anyway.
You might want to use a media-query for larger screens so it doesn't stay as small as 300px, but that's up to you and dependent on your design.
Can I help you any further?

Answer 3

you need to add height in pixel
#mainForm {
width: 320px;
height: 340px;
background-color: white;
font-family: Montserrat;
text-align: center;
align-items: center;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
#Username, #Password, #Email, #Auth, #auth2 {
border: none; border-bottom: 2px solid;
padding: 0.5%;
margin-left: 1%;
width:40%;
transition: width 1s;
-webkit-transition: width 0.8s;
text-align: center;
font-size: 16px;
}
#Username:focus, #Password:focus, #Email:focus, #auth2:focus {
width: 60%;
}
#userP, #passP, #emailP, #authP{
font-size: 20px;
}
#userP{
margin-top:15%;
}
<div id="mainForm">
<form id="userForm" method="post">
<p id="userP">Username: <br>
<input id="Username" type="text" name="Username" placeholder="Username" onfocus="this.placeholder='';" onblur="this.placeholder='Username';">
<p id="passP">Password: <br>
<input id="Password" type="password" name="Password" placeholder="Password" onfocus="this.placeholder='';" onblur="this.placeholder='Password';">
<p id="emailP">Email: <br>
<input id="Email" type="text" name="Email" placeholder="Email Address" onfocus="this.placeholder='';" onblur="this.placeholder='Email Address';">
<p id="authP">Auth Code: <br>
<input id="auth2" type="text" name="Auth" placeholder="Auth Code" onfocus="this.placeholder='';" onblur="this.placeholder='Auth Code';"><br>
<input type="submit" id="submit" name="submit" value="Login"/>
<h4>Don't have an account? <a href="register.php" >Register!</a></h4>
</form>
</div>