HAGA LO QUE HICIMOS: PANTALLA RESPONSIVA | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

Ajustando el diseño para pantallas más pequeñas

.presentacion {
    padding: 6% 13%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

Implementando media queries para cambios en el diseño


@media (max-width: 1023px){

    .presentación{
        flex-direction: column;
        padding: 5%;
    }

   }

Refinando el diseño responsivo

@media (max-width: 1200px){

    .presentación{
        flex-direction: column-reverse;
        padding: 5%;
    }

   }

Ajustando el encabezado para pantallas más pequeñas


@media (max-width: 1023px){

    .header{
        padding: 10%;
    }
}

Centrando elementos del menú en pantallas más pequeñas

@media (max-width: 1023px){

     .header__menu{
        justify-content: center;
    }
}

Refinando el diseño responsivo del encabezado

.header{
    padding: 2% 0% 0% 15%;
}

.header__menu{
    display: flex;
    gap: 80px;
}
....
@media (max-width: 1023px){

    .header{
        padding: 10%;
    }
    .header__menu{
        justify-content: center;
    }
    .presentacion{
        flex-direction: column-reverse;
        padding: 5%;

    }

    .presentacion__contenido{
        width: auto;
    }
}

Hola Daniela, espero que estés bien

Veo que estás trabajando en hacer que tu diseño sea más responsivo, especialmente para pantallas más pequeñas. A continuación, te doy algunas sugerencias basadas en el código que compartiste:

Ajuste de .presentacion para pantallas pequeñas:
- En tu media query para pantallas más pequeñas de 1023px, ya estás cambiando la dirección del flex a columna, lo cual es correcto para apilar los elementos verticalmente. Sin embargo, asegúrate de que el gap que usas en el contenedor .presentacion sea suficiente para evitar que los elementos se vean muy juntos. Puedes ajustar el gap dentro de la media query si es necesario.
Orden de los elementos en .presentacion:
- Para pantallas menores a 1200px, estás usando flex-direction: column-reverse;, lo cual debería invertir el orden de los elementos. Asegúrate de que el HTML tenga los elementos en el orden correcto inicialmente, para que el cambio sea efectivo.
Ajuste del encabezado (.header) para pantallas pequeñas:
- El padding: 10%; que aplicas en la media query para .header debería centrarlo mejor. Si notas que todavía no se ve bien, podrías experimentar con valores diferentes de padding para ajustar mejor el diseño.
Centrado de elementos del menú en .header__menu:
- Ya estás usando justify-content: center;, lo cual es correcto para centrar los elementos. Asegúrate de que el contenedor .header__menu tenga suficiente espacio para que los elementos se centren correctamente.
Refinamiento general:
- Revisa si hay algún estilo heredado o específico que pueda estar afectando el comportamiento esperado. A veces, pequeños ajustes en el padding, margin o gap pueden hacer una gran diferencia.

Recuerda probar los cambios en diferentes tamaños de pantalla para asegurarte de que el diseño se vea bien en todas las resoluciones. Espero que estas sugerencias te ayuden a conseguir el diseño responsivo que buscas.

Espero haber ayudado y ¡buenos estudios!