0

Como hacer un Login Responsive.

Hola, tengo un codigo de un login y un register que estoy haciendo como proyecto para iniciar sesion o para registrarse, pero me gustaria hacerlo responsive y que quede adaptable para computadoras, tablets y celulares. El problema es que no se como hacerlo, ya que quizas hay que cambiar parte del codigo, modificar o agregar. Agradecería mucho la ayuda.

Así se ve en la web: Web

Así se ve en movil:

Movil

Me gustaría que en esta versión, la imagen desapareciera y solo quedara el login para ingresar el email y contraseña.

  • Código HTML:

     <body>
         <section class="container">
             <div class="content">
    
       <div class="text">Bienvenido</div>
             <div class="text">de nuevo!</div>
             </div>
             <div class="content-form">
                 <div class="form-box login">
                     <form class="formulario">
                         <h3>Iniciar Sesion</h3>
    
                     <div class="input-box">
                         <input type="email" name="email" id="email" class="entradas" placeholder="Email">
                     </div>
    
                 <div class="input-box">
                     <input type="password" name="password" id="password" class="entradas" placeholder="Contraseña">
                 </div>
    
                 <div class="checkbox">
                     <input type="checkbox" name="checkbox" id="checkbox">
                     <label for="checkbox">Recordarme</label>
                 </div>
    
                 <input type="submit" class="btn" value="Iniciar Sesion">
                 <p class="texto">¿No tenes una cuenta? Crea una <a href="registro.html">aquí</a>.</p>
             </form>
         </div>
     </div>
    
  • Código CSS:

     *{
             justify-content: center;
             align-items: center;
             padding: 0;
             margin: 0;
             font-family: 'DM Sans', sans-serif ;
             text-decoration: none;
      }      
    
     :root{
         --box-color: #e98b60;
     }
    
     body{
         background-color:#e0e0e0 ;
         background-attachment: fixed;
         display: flex;
     }
    
     .container{
         width: 1100px;
         height: 600px;
         border-radius: 5px;
         padding: 40px;
         position: absolute;
         top: 15%;
         background: url('img.jpeg') no-repeat;
         background-size: cover;
         background-position: center;
         box-shadow: 2px 2px 20px #0000006e;
     }
    
     .container .content{
         /* position: absolute; */
         top: 0;
         left: 0;
         width: 58%;
         height: 100%;
         color: white;
         font-size: 60px;
         font-weight: 600;
         margin-top: 80px;
         flex-direction: column;
         display: flex;
         align-items: flex-start;
     }
    
     .container .content-form{
         position: absolute;
         top: 0;
         right: 0;
         width: calc(100% - 58%);
         height: 100%;
         background-color: #ffffff;
         border-radius: 0 5px 5px 0;
     }
    
     .content-form .form-box{
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         width: 100%;
     }
    
     .form-box h3{
         font-size: 2.5rem;
         text-align: center;
         margin-bottom: 10px;
     }
    
     .form-box .input-box{
         position: relative;
         width: 19rem;
         height: 50px;
         border-radius: 5px;
         border: 1px solid #acacac;
         margin-bottom: 10px;
         padding: 0 0 0 25px;
     }
    
     .input-box input{
         height: 100%;
         width: 100%;
         border: none;
         outline: none;
         background: transparent;
         font-size: 15px;
         color: black;
     }
    
     .btn{
         width: 100%;
         height: 45px;
         background-color: var(--box-color);
         color: #ffffff;
         border: none;
         outline: none;
         border-radius: 4px;
         font-size: 16px;
         margin-top: 15px;
         cursor: pointer;
         transition: 0.3s;
     }
    
     p{
         text-align: center;
         margin-top: 5px;
     }
    
     a{
         color: var(--box-color);
     }
    
     .checkbox{
         margin-top: 12px;
         outline: none;
         text-decoration: none;
     }
    

1 respuesta 1

0

Usa los Media Queries:

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .content, .content-form {
        width: 100%;
        padding: 10px;
    } 

    .image-container {
        display: none; /* Oculta la imagen en pantallas pequeñas */
    }

    .form-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .form-box .input-box {
        width: 100%;
        max-width: 300px;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}
1
  • Intenté con este codigo que me recomendaste, pero no me funciona, sigue igual. Ademas la clase image-container no existe en mi codigo. La imagen que tiene el login fue ingresada por css no por una etiqueta de img.
    – Brenda
    Commented el 31 ago. 2023 a las 12:08

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.