0

Mi problema es el siguiente cuando abro mi proyecto web le doy a inpeccionar y lo pongo en modo movil el footer esta correctamente al final de la pagina. Pero cuando abro con mi celular se coloca a la mitad de la pagina. Yo lo que estoy haciendo para que este debajo es en css .

  body{
   display: flex;
   min-height: 100vh;
    
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
   }

Y el footer

.footer{

  margin-top: 4rem;
  align-self: flex-end;

  height: 10rem;
  width: 100%;


  background-color: rgb(46, 48, 47);
}

Esta es la pagina si la abres desde la computadora el footer se ve perfecto el tema es desde el celular: https://angry-feynman-da7262.netlify.app/

4
  • Necesitamos mas información para entender el porque del comportamiento, puedes publicar un zip del sitio o mas información de su código? Commented el 24 nov. 2020 a las 17:06
  • Puedes agregar todo el codigo, html, y css acá y pasarlo a snippet
    – Excorpion
    Commented el 24 nov. 2020 a las 17:07
  • CTRL M funciona en el editor para abrir
    – Excorpion
    Commented el 24 nov. 2020 a las 17:08
  • No se como puedo subir un zip aqui no veo la opcion.Y lo otro si agrego todo el codigo me dice que tengo que poner mas descripcion sobre el problema
    – DProg
    Commented el 24 nov. 2020 a las 17:21

1 respuesta 1

0

utiliza la propiedad position fixed esto te permite agregar la posición bottom que deberás colocar en 0 para que se valla al fondo.

Referencia: How TO - Fixed Footer

Vista movil

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html> 

tengo

2
  • El problema de esa solucion es que te quedea abajo pero no de la pagina web es como que si hago scroll para arriba el footer tambien sube
    – DProg
    Commented el 24 nov. 2020 a las 17:30
  • Es correcto, en tu caso en vez de fixed te serviria mejor absolute, sin embargo, ingrese al enlace de tu respuesta y no pude replicar el problema del footer, ya lo resolviste? Commented el 24 nov. 2020 a las 18:46

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.