
German Vera
PreguntaPor que se muestra una linea divisoria entre el footer y el contenedor del formulario? Solo en version mobile?
- Es posible en tu HTML y no en tu CSS, tengas un <hr>.
- O también (según tu código) el problema no está en footer sino más arriba en otro elemento.
Pablo Axel
A lo mejor pusiste un <hr> antes del <footer> Pero así se ve bien, ya que así se suele usar casi siempre

Carlos Adrian PACHECO PINILLA
en el código no se alcanza a visualizar qué puede afectar el footer, sin embargo, te puedo recomendar que en @media llames el footer y le asignes la propiedad border:none; espero soluciones prontamente...!!

German Vera
Si ya la habia removido inicialmente en el media queries, como se muestra en la ultima seccion del codigo que comparti inicialmente. De todas formas me funciono como les indique en el ultimo comentario a este. De verdad fue de gran ayuda, gracias.

David Santiago Diaz
Hola. 😀 El codigo que nos compartiste lo analice con mi editor de codigo y efectivamente como dice Camilo, la unica propiedad que te esta afectando es la propiedad de border que tienes en ".login__container", esa linea divisora que nos muestras no aparece en mobile; si quieres que no aparesca esta linea prueba removiendo la propiedad o en el media queries oultala. 😀
Espero haberte ayudado. ✌

German Vera
Sigue igual, omitiendo esa linea, lo resolvi con el contenedor login,
.login { background: linear-gradient(#00d4ff, #020024 ); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0px 0px; min-height: calc(100vh - 200px); //aqui es donde se muestra la linea divisoria }
En el @media agregue esta linea
.login { min-height: calc(100vh - 250px); }
Ahora si me funciona
Ahora si podrias explicarme el por que sucede esto?

Camilo Caldas
Para aclarar el anterior. Intenta truncar en esa línea en el @media de responsive. Dile como border:none;

Camilo Caldas
Noto que tienes un border en todo el .login__container
A mi si me aparece al montar tal cual tu código (Omite que se ve feo). Pero puedes notar que a mi me dibuja el border completo blando. Intenta retirar esa línea y prueba

German Vera
body { margin: 0px; font-family: 'Muli', sans-serif; } .header { align-items: center; background-color: #00d4ff; color: white; display: flex; height: 100px; justify-content: space-between; top: 0px; width: 100%; } .header__img { margin-left: 30px; width: 200px; } .login { background: linear-gradient(#00d4ff, #020024 ); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0px 0px; min-height: calc(100vh - 200px); } .login__container { background: rgba(255, 255, 255, 0.1); border: 2px solid white; border-radius: 40px; color: white; padding: 60px 68px 40px; min-height: 500px; width: 300px; display: flex; justify-content: space-around; flex-direction: column; } .login__container h2 { text-align: center; } .login__container--form { display: flex; flex-direction: column; } .login__container label { font-size: 14px; } .login__container--remember-me { color: white; display: flex; justify-content: space-between; margin-top: 10px; } .login__container--remember-me a { color: white; font-size: 14px; text-decoration: none; } .login__container--remember-me a:hover { color: white; font-size: 14px; text-decoration: underline; } .login__container--social-media > div { display: flex; align-items: center; font-size: 14px; margin-bottom: 10px; } .login__container--social-media > div > img { width: 30px; margin-right: 10px; } .login__container--register { font-size: 14px; } .login__container--register a { font-size: 16px; color: white; font-weight: bold; text-decoration: none; } .login__container--register a:hover { text-decoration: underline; } .input { background-color: transparent; border-top: 0px; border-right: 0px; border-left: 0px; border-bottom: 2px solid white; font-size: 16px; font-family: 'Muli',sans-serif; margin-bottom: 20px; padding: 0px 20px; outline: none; height: 50px; } ::placeholder { color: white; } .button { background-color: rgba(255,255,255,0.1); border: none; border-radius: 25px; color: white; cursor: pointer; font-size: 16px; font-weight: bold; font-family: 'Muli',sans-serif; height: 50px; letter-spacing: 1px; margin: 10px 0px; } .footer { background: #020024; display: flex; align-items: center; height: 100px; width: 100%; } .footer a { color: white; cursor: pointer; font-size: 14px; padding-left: 30px; text-decoration: none; } .footer a:hover { text-decoration: underline; } @media only screen and (max-width: 600px) { .login__container { background-color: transparent; border: none; padding: 0px; } .footer { align-items: flex-start; flex-direction: column; } }
<!DOCTYPE html> <html lang="en"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <img class="header__img" src="../assets./assets/logo-platzi-video-BW2.png" alt=""> </header> <section class="login"> <section class="login__container"> <h2>Inicia Sesion</h2> <form class="login__container--form"> <input class="input" placeholder="Correo" type="text"> <input class="input" placeholder="Contraseña" type="password"> <button class="button">Iniciar Sesion</button> <div class="login__container--remember-me"> <label> <input type="checkbox" name="" id="cbox1" value="chexbox">Recuerdame </label> <a href="/">Olvide mi contraseña</a> </div> </form> <section class="login__container--social-media"> <div> <img src="../assets/google-icon.png" alt="Google">Inicia Sesion en Google </div> <div> <img src="../assets/twitter-icon.png" alt="Twitter">Inicia Sesion en Twitter </div> </section> <p class="login__container--register">No tienes niguna cuenta <a href="/">Registrate</a></p> </section> </section> <footer class="footer"> <a href="/">Terminos de uso</a> <a href="/">Declaracion de Privacidad</a> <a href="/">Centro de ayuda</a> </footer> </body> </html>

Camilo Caldas

David Santiago Diaz
Hola. 😀 Con el codigo que nos compartiste no se puede determinar que propiedad esta afectando el estilo de tu web, podrias compartirnos el codigo HTML al igual que el de CSS completo. 🤨
Saludos. ✌