How do I make this my sign up form to be responsive when the window is minimized?
Here is the HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Sign Up</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<style>
.container-fluid{
position:center;
margin:auto;
background-color:#DCDCDC;
padding:40px;
border-radius:6px;
width:800px;
}
</style>
</head>
<body style="background-color: #00003D; font-family: 'Comfortaa'; overflow-x: no-display;">
<form id="form1" runat="server">
<br />
<div class="top-head">
<h1 style="font-size: x-large; text-align: center; color: white;">joscheck</h1>
</div>
<!-- Login starts-->
<br />
<div class="container-fluid" style="max-width: 600px;">
<div class="container2" style="max-width: 400px; margin: auto;">
<h2 class="form-signin-heading" style="font-size: medium; font-weight: bold; text-align: center; margin-top: 0px;">joscheck - Sign Up</h2>
<hr />
<br />
<label for="txtUsername">Email</label>
<asp:TextBox ID="mailtxtbx" runat="server" CssClass="form-control" placeholder="Email Address" />
<br />
<label for="txtPassword">Password</label>
<asp:TextBox ID="pass" runat="server" TextMode="Password" CssClass="form-control" placeholder="Password" />
<br />
<label for="txtPassword">Confirm Password</label>
<asp:TextBox ID="conpass" runat="server" TextMode="Password" CssClass="form-control" placeholder=" Confirm Password" />
<asp:CheckBox ID="check1" runat="server" />
<br />
<asp:Button ID="Button1" runat="server" Text="Create Admin Account" Class="btn btn-primary" OnClick="Button1_Click" />
<hr />
<div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
<strong>Error! </strong><asp:Label ID="lblMessage" runat="server" />
</div>
</div>
<div id="Div1" runat="server" visible="false" class="alert alert-success">
<strong>Success! </strong><asp:Label ID="lblsuccess" runat="server"/><p><a href="LoginForm.aspx">Click to Login</a></p>
</div>
<p style="font-size: smaller;">By Clicking "Create Admin Account" button, you agree to Joscheck's <a href="#">Terms and Conditions for use.</a>.</p>
</div>
<br />
<div class="container signin" style="text-align: center; color: white;">
<p>Already Have existing Account? <a href="LoginForm.aspx">Click to Login</a>.</p>
</div>
<!--Login ends-->
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
