Currently, I am in the process of constructing a login form for my web application and have opted to use Bootstrap for its styling. To ensure that the screen is responsive, I've integrated the following "Meta Tag" into the structure:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Despite experimenting with various combinations of Bootstrap's col classes within the grid system, I have yet to achieve the desired outcome.
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(51, 51, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="container">
<div class="row">
<div class="col-12">
<div id="loginform">
// login form code
</div>
<div id="signupform">
// signup form code
</div>
</div>
</div>
</div>
</div>
The current output can be viewed here - Output Image
If you have any insights on what could potentially be going wrong or suggestions on how to proceed, please feel free to share them. Your assistance is greatly appreciated.
Thank you very much.