1

Estoy haciendo una pagina login y quiero que sea responsive.

Siguiendo un tutorial, a esa persona le queda asi

introducir la descripción de la imagen aquí

Peo yo siguiendo los pasos que indica me queda otra cosa totalmente distinta.

introducir la descripción de la imagen aquí

Queria saber si me podian ayudar a arreglar esto.

*, *::before, *::after{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
}

section {
    width: 100vw !important;
    height: 100vh !important;
    padding: 60px !important;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
}

.contenedor {
    background: #fff !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    box-shadow: 0 0 15px rgba(0,0,0,.7) !important;
    overflow: hidden !important;
}

.contenedor_video {
    position: relative !important;
    width: 50% !important;
    height: 100% !important;
}

.contenedor_video video{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.contenedor_contenido {
    position: relative !important;
    display: flex !important;
    width: 50% !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.contenedor_error {
    position: absolute !important;
    bottom: -60px !important;
    left: 0 !important;
    background: #fa464f !important;
    color: #fff !important;
    width: 100% !important;
    height: 60px;
    text-align: center;
    font-size: 1.2em;
    transition: all .5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,.7);
}

.mostrar_error {
    bottom: 0 !important;
}

.contenedor_formulario {
    width: 50% !important;
}

.contenedor_contenido h2 {
    color: #525252 !important;
    font-weight: 500 !important;
    font-size: 1.6em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    border-bottom: 3px solid #082275 !important;
    display: inline-block !important;
}

.input{
    margin-bottom: 20px;
}

.input span{
    font-size: 1em;
    display: inline;
    font-weight: 300;
    letter-spacing: 1px;
}

.input input, .input button{
    width: 100%;
    padding: 12px 20px;
    font-weight: 400;
    border: 1px solid rgb(211, 210, 210);
    font-size: 1em;
    letter-spacing: 1px;
    color: #575f63;
    background-color: #f5f4f4;
    border-radius: 20px;
}

.input button{
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
    border: none;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#loader {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border-top: 3px solid transparent;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    animation: girar .6s linear infinite;
    display: none;
}

@keyframes girar{
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 768px){
    section{
        padding: 10px;
    }

    .contenedor_video{
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
    }

    .contenedor_contenido{
        width: 100%;
        height: 100%;
        z-index: 3;
    }

    .contenedor_formulario{
        width: 100%;
        padding: 25px;
        background: rgba(255, 255, 255, .9);
    }
}
 <section>
        <div class="contenedor">
            <div class="contenedor_contenido">
                <div class="contenedor_formulario">
                    <h2>Iniciar Sesión</h2>
                    <form id="form_login" action="~/Home/VerificarIdentidad" method="post">
                        <div class="input">
                            <span>Usuario:</span>
                            <input type="text" class="usuario" name="username" required/>
                        </div>
                        <div class="input">
                            <span>Contraseña:</span>
                            <input type="password" class="contrasenia" name="password" required/>
                        </div>
                        <div class="input">
                            <button type="submit">
                                <div class="loader" id="loader">                                    
                                </div>
                                <span class="titulo_boton">Ingresar</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="contenedor_video">
                <video autoplay loop muted>
                    <source src="https://www.multiradio.com.ar/wp-content/uploads/2020/01/multiradio_norlog.mp4#t=0,11" type="video/mp4"/>
                </video>
            </div>
            <div class="contenedor_error">
                <p>¡Ups! Parece que tus credenciales no son correctas . Inténtalo de nuevo.</p>
            </div>
        </div>
    </section>

El @media esta al final del archivo css. No creo que haga falta pasarles todo el código pero por las dudas se los dejo asi tambien lo pueden probar

1 respuesta 1

2

Te paso el codigo fíjate si es lo que te sirve, pero falta mas información en la pregunta, no se entiende que es lo que queres, que queres que cambie en los estilos al bajar la resolucion?

en el css tenés escrito !important en todas las reglas y eso no es buena practica, solo tenés que usarlo en casos puntuales donde queres que si o si se aplique cierta regla.

Esto ejecuta lo que esperabas, pero falta mas información. Solo le hice unos retoques.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <div class="contenedor_video">
        <video autoplay loop muted>
            <source src="https://www.multiradio.com.ar/wp-content/uploads/2020/01/multiradio_norlog.mp4#t=0,11" type="video/mp4"/>
        </video>
    </div>
    <section>
        <div class="contenedor">
            <div class="contenedor_contenido">
                <div class="contenedor_formulario">
                    <h2>Iniciar Sesión</h2>
                    <form id="form_login" action="~/Home/VerificarIdentidad" method="post">
                        <div class="input">
                            <span>Usuario:</span>
                            <input type="text" class="usuario" name="username" required/>
                        </div>
                        <div class="input">
                            <span>Contraseña:</span>
                            <input type="password" class="contrasenia" name="password" required/>
                        </div>
                        <div class="input">
                            <button type="submit">
                                <div class="loader" id="loader">                                    
                                </div>
                                <span class="titulo_boton">Ingresar</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="contenedor_error">
                <p>¡Ups! Parece que tus credenciales no son correctas . Inténtalo de nuevo.</p>
            </div>
        </div>
    </section>
</body>
</html>

CSS:

*, *::before, *::after{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
}

section {
    width: 100vw !important;
    height: 100vh !important;
    padding: 60px !important;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
}

.contenedor {
    background: rgba(255, 255, 255, 0.659) !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    box-shadow: 0 0 15px rgba(0,0,0,.7) !important;
    overflow: hidden !important;
}
    
    .contenedor_video {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}
    
.contenedor_video video{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.contenedor_contenido {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.contenedor_error {
    position: absolute !important;
    bottom: -60px !important;
    left: 0 !important;
    background: #fa464f !important;
    color: #fff !important;
    width: 100% !important;
    height: 60px;
    text-align: center;
    font-size: 1.2em;
    transition: all .5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,.7);
}

.mostrar_error {
    bottom: 0 !important;
}

.contenedor_formulario {
    width: 90% !important;
}

.contenedor_contenido h2 {
    color: #525252 !important;
    font-weight: 500 !important;
    font-size: 1.6em !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    border-bottom: 3px solid #082275 !important;
    display: inline-block !important;
}

.input{
    margin-bottom: 20px;
}

.input span{
    font-size: 1em;
    display: inline;
    font-weight: 300;
    letter-spacing: 1px;
}

.input input, .input button{
    width: 100%;
    padding: 12px 20px;
    font-weight: 400;
    border: 1px solid rgb(211, 210, 210);
    font-size: 1em;
    letter-spacing: 1px;
    color: #575f63;
    background-color: #f5f4f489;
    border-radius: 20px;
}

.input button{
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
    border: none;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#loader {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border-top: 3px solid transparent;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    animation: girar .6s linear infinite;
    display: none;
}

@keyframes girar{
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 768px){
    section{
        padding: 10px;
    }

    .contenedor_video{
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
    }

    .contenedor_contenido{
        width: 100%;
        height: 100%;
        z-index: 3;
    }

    .contenedor_formulario{
        width: 100%;
        padding: 25px;
    }
}
4
  • Es verdad, me falto acalarar más en detalle lo que busco y cuál es mi rpoblema. Por otro lado, los !importants sí son una mala practica, estaba teniendo un problema con los estilos, los cuales pude resolver, me faltan eliminarlos. Ahora pruebo tu código y te digo. Gracias por tu respuesta! Commented el 28 jul. 2022 a las 20:43
  • fijate que cambie el selector ".contenedor-video" hace unos segundos porque el fondo de video no se mostraba bien en tamaños grandes de pantalla. Tenelo en cuenta. Commented el 28 jul. 2022 a las 20:48
  • En tamaños grandes de pantalla se me borra el el formulario, es ocupado 100% por el video, calculo que por el position: absolute en .contenedor_video Commented el 28 jul. 2022 a las 20:54
  • tengo un monitor de 1370 x 764 es pequeño. Al usar el maximo tamaño de pantalla incluso poniendo en pantalla completa me funciona bien... El codigo lo cambie hace 3 mins mas o menos, fijate de actualizarlo. Commented el 28 jul. 2022 a las 21:01

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.