Tanto el header como el footer no se me ajustan de la mejor forma cuando achico más el ancho de la pantalla.
¿Qué cambios debo realizar en mi archivo style.css?
@media(max-width: 1200px){
.header{
padding:10%;
}
.header-menu{
justify-content: center;
}
.presentacion{
flex-direction: column-reverse;
padding: 5%;
}
.presentacion-contenido{
width: auto;
}
}
Hola Adan,
Para mejorar la responsividad de tu header y footer, puedes considerar ajustar algunos estilos en tu archivo style.css. Aquí te dejo algunas sugerencias que podrían ayudarte:
Header y Footer más flexibles:
Asegúrate de que el header y el footer tengan un ancho del 100% para que se ajusten al tamaño de la pantalla.
.header, .footer {
width: 100%;
}
Reducción de padding:
El padding del 10% en el header puede ser demasiado en pantallas pequeñas. Intenta reducirlo para mejorar el ajuste.
@media(max-width: 1200px) {
.header {
padding: 5%;
}
}
Ajustar el menú:
Si el menú no se ajusta bien, podrías considerar usar un menú desplegable o cambiar su orientación en pantallas pequeñas.
Verificar el footer:
Aunque no has mencionado el footer en tu código, asegúrate de que también tenga estilos responsivos similares al header.
@media(max-width: 1200px) {
.footer {
padding: 5%;
text-align: center;
}
}
Imágenes y contenido:
Asegúrate de que las imágenes y otros contenidos dentro del header y footer sean responsivos. Usa max-width: 100% para las imágenes.
img {
max-width: 100%;
height: auto;
}
Prueba estos ajustes y verifica si mejoran la responsividad de tu diseño.
Espero haber ayudado y buenos estudios!