cuerpo
<div class="container" style="margin-top: 70px;"> <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-8"> <p id="signText"> Signin Form</p> <div class="form-floating formPos mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating formPos"> <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div> <a href="#"> <p id="forgetPos"> Forget Password?</p> </a> <div class="form-check"> <input class="form-check-input rememberPos" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label rememberPos" for="defaultCheck1"> Remember Me </label> </div> <button type="button" class="btn btn-success buttonPos">Login</button> </div> </div>cuando trato de dejar que el formulario se ajuste a los usuarios de dispositivos móviles y usuarios de computadoras, todo está bien, pero el problema es cuando reduzco la pantalla del btn y olvido la contraseña y recuerdo que salgo de mi div y hago un problema en el diseño
También debe usar clases de Bootstrap para la codificación receptiva; por ejemplo, en su código, está diciendo que la columna debe tomar 8 de las 12 columnas en la página (horizontalmente). Esto crea problemas en dispositivos pequeños; en dispositivos móviles, necesita todo el ancho posible del dispositivo, y significa que debe usar 12 columnas de 12 columnas posibles. Para hacer eso, simplemente reemplace la clase "col-8" en el div ".formlogin" con "col col-md-8". Tu div será así:
<div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-md-8 col"Además de la respuesta anterior de Zara, podrías usar...
<div class="col-lg-8 col-md-12 mx-auto">Con suerte, esto complementará la respuesta de Zara al hacer que su cuadro tenga 12 columnas de ancho en dispositivos móviles y al mismo tiempo permita 8 columnas en pantallas más grandes, además, gracias a mx-auto, ese cuadro de 8 columnas se centrará horizontalmente.