Por que se muestra una linea divisoria entre el footer y el contenedor del formulario? Solo en version mobile?

Pregunta de la clase:
Media queries
German Vera

German Vera

Pregunta
studenthace 4 años

Por que se muestra una linea divisoria entre el footer y el contenedor del formulario? Solo en version mobile?

10 respuestas
para escribir tu comentario
    Pablo Axel

    Pablo Axel

    studenthace 4 años

    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

    Carlos Adrian PACHECO PINILLA

    studenthace 4 años

    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

    German Vera

    studenthace 4 años

    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

    David Santiago Diaz

    studenthace 4 años

    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

    German Vera

    studenthace 4 años

    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

    Captura de pantalla de 2021-02-21 12-51-23.png

    Ahora si podrias explicarme el por que sucede esto?

    Camilo Caldas

    Camilo Caldas

    studenthace 4 años

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

    Camilo Caldas

    Camilo Caldas

    studenthace 4 años

    cambiar_de_border.PNG

    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

    cambiar_de_border-form.PNG

    German Vera

    German Vera

    studenthace 4 años
    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

    Camilo Caldas

    studenthace 4 años
    • 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.
    David Santiago Diaz

    David Santiago Diaz

    studenthace 4 años

    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. ✌

Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!