I have crafted a form using Django, Crispy Forms, and Bootstrap. When the screen width is above 575px, everything looks great with fields of appropriate width and floating labels in their correct position. However, when the screen width drops below 575px, the floating labels seem to be off. I am seeking advice on how to keep the floating labels aligned correctly with the input field, regardless of the screen width.
Expected: >575px https://i.sstatic.net/V5Brq.png Unexpected: <575px
https://i.sstatic.net/xux1e.png
I suspect this issue arises because in order to ensure responsive resizing of the input fields, I manually adjusted the CSS to reduce the field width to 85% when the screen width is under 575px using a media query as shown below:
CSS
.form-floating {
position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
height: calc(3.5rem + 2px);
line-height: 1.25;
}
.form-floating > label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem 0.75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (max-width: 575px) {
.form-floating > .form-control,
.form-floating > .form-select {
display: block;
width: 85%;
padding: 0.375rem 0.75rem;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-floating > label {
position: absolute;
top: 0.5rem;
left: 0.75rem;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
}
HTML
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f4459445a470b061a020b5b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center" style="margin-top: 50px;">
<div class="col-md-4 mb-4 mb-md-0">
<div class="border rounded bg-light h-100">
<div class="row justify-content-center">
<h5 class="text-center"> Login Please</h5>
</div>
<br>
<div class="col-sm-10 mx-auto">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690708040c290c11080419050c470a0604">[email protected]</a>">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</div>
</div>
</div>
</div>
</div>
CODEPEN LINK https://codepen.io/lowdowner/pen/LYJyaGP