1

Lo que deseo lograr se puede apreciar en el siguiente enlace: Objetivo

Estuve todo el dia buscando informacion pero no pude lograrlo directamente con bootstrap. Sin embargo, con muchas reglas CSS, breakpoints, y algunos parches pude lograrlo, no obstante, tengo muchos problemas.

Descripcion de los problemas: 1- Uno de los tantos div que contiene el formulario tiene un height inferior al contenido del mismo, por ende, siempre un btn queda fuera. 2- No tengo forma de adaptar el ancho de los divs que contienen el formulario.

Lo que se me ocurre es ir crearlo desde cero pero usando bootstrap 4 100%.

Una de las tantas cosas que hago es lo siguiente:

/*The following styles will be applied on xs, xm and md screens*/
@media only screen and (max-width: 1199px) {
    body{
        background-image: url({{ $company->getLoginImageUrl() }});
        background-repeat: no-repeat, repeat;
        background-position: center; /* Center the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        padding-top: 50px;
    }
    .login-box{
        opacity: .92;
        flex-direction: column;
        height: 60vh;
    }
    .reset-password{
        display:block;
        font-size: 0.7rem;
    }

}

Es decir, cuando detecto que la pantalla es igual o inferior a MD, entonces pongo la imagen como fondo del body, le agrego opacidad al div que contiene al formulario, pero no he encontrado la forma de decirle a este div que se adapte al contenido que tiene dentro sin tocar con el footer.

El ancho del div que contiene al formulario, lo estoy controlando de la siguiente forma y me parece precaria:

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .login-box {
        width: 60%;
    }
}


@media only screen and (max-width: 991px){
    .login-box {
        width: 70%;
    }
}

@media only screen and (max-width: 768px){
    .login-box {
        width: 90%;
    }
}
3
  • 1
    Buen día, ¿podrías mostrarnos tu intento?. Recuerda que si el código es muy largo, puedes crear un proyecto en codepen.io y compartirnos el enlace. Por cierto, ¿la respuesta de esta pregunta te sirvió?, si es así, recuerda verificarla. Commented el 15 feb. 2023 a las 17:21
  • @Cris223511.dev aprecio mucho tu respuesta. Una pregunta, podriamos abrir un chat? me gustaria preguntarte algo
    – Carlos
    Commented el 15 feb. 2023 a las 17:43
  • Creé un room, lo puede visualizar? Commented el 15 feb. 2023 a las 17:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.