Currently, I am utilizing mdbootstrap4 to develop a prototype user interface for a web application.
My main objective is to make the login container adapt its size as the screen width changes. I want it to scale up when the screen widens and adjust to mobile UI patterns when the screen narrows down, with the login button taking precedence and occupying the full width of its container on mobile devices. However, I have encountered issues where the link text overflows or the button's dimensions become distorted and overlap with the text.
Furthermore, I am struggling to resolve the responsive ordering and alignment problems.
This is an excerpt of my code:
<div class="container">
<div class="row">
<div class="col text-center text-white">
<!-- Headers -->
</div>
</div>
<div id="login-form" class="row justify-content-center mt-5">
<div class="col-lg-6 col-md-8 col-10">
<div class="card">
<div class="card-body">
<form name="">
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form1" class="form-control">
<label for="form1">Email Address</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="form2" class="form-control">
<label for="form2">Password</label>
</div>
<div class="container mt-5">
<div class="row align-items-center text-right">
<div class="col-12 col-sm-12 col-md-8 order-first order-sm-last text-right">
<a href=".">Forgot Password?</a>
</div>
<div class="col-12 col-sm-12 col-md-4">
<button class="btn btn-primary btn-block order-last order-sm-first" target=".">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I've been experimenting to find a refined solution to this problem. Can anyone provide guidance in the right direction?