> Faqs > Cómo evitar que elementos salgan del header al visualizar la página en móvil

Cómo evitar que elementos salgan del header al visualizar la página en móvil

Mi problema es que cuando pongo mi página web a tamaño de un móvil, los elementos dentro mi header se salen.

He estado mirando en Internet y pone que la solución es poner un div padre y añadirle un positicion fixed o absolute, pero no me parece muy legal que digamos.

He probado varias soluciones pero estoy ya angustiado de no saber como hacerlo.

Respuestas

Generalmente lo que se hace es ocultar unos elementos y mostrar otros dependiendo del tamaño de la ventana del navegador. O modificar el tamaño de los elementos, para que se adapten al espacio pequeño de las pantallas de los móviles.

Esto se hace con CSS, pero en principio position fixed y absolute no te van a servir para poder conseguir esos cambios de tamaño, porque sirven para cosas distintas. Para esta adaptabilidad a los distintos tamaños de ventanas o pantallas hacemos uso de Media Queries.

Es una operación bastante sencilla y habitual, por lo que con un poco de estudio no tendrás problemas para implementarlo. En desarrollo web tenemos un manual de responsive donde puedes aprender todo lo relacionado con la adaptabilidad del diseño a distintos tipos de pantallas y resoluciones. En el manual de CSS también encontrarás un artículo para enseñar a trabajar con Media Queries.

Una vez te adaptes los elementos al espacio que tienes muy probablemente necesites poner el típico menú de la hamburguesa para desplegar diferentes opciones que no te quepan en la cabecera cuando el espacio que tengas sea muy reducido. Esto ya sería un tema distinto que como te decía solucionas con JavaScript o usando algún componente ya listo o plugin de jQuery. Por ejemplo en DesarrolloWeb lo implementamos con Web Components que se encargan de hacer el menú desplegable y el icono de la hamburguesa. Pero esto ya es otro asunto.

Miguel Angel
3295 146 215 17