1 - Ajustando o layout para telas menores

CSS:

.apresentacao {

    padding: 5% 18%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

2 - Implementando media queries para mudança de layout

CSS:

@media (max-width: 1023px) {

    .apresentacao {

        flex-direction: column;
    }
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 - Refinando o layout responsivo

CSS:

@media (max-width: 1200px) {

    .apresentacao {

        flex-direction: column-reverse;
    }
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 - Ajustando o cabeçalho para telas menores

CSS:

@media (max-width: 1200px) {

    .cabecalho {

        padding: 10%;
    }

    .apresentacao {

        flex-direction: column-reverse;
    }
}

5 - Centralizando itens do menu em telas menores

CSS:

@media (max-width: 1200px) {

    .cabecalho {

        padding: 10%;
    }

    .cabecalho__navegacao {

        justify-content: center;
    }

    .apresentacao {

        flex-direction: column-reverse;
    }
}

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

6 - Refinando o design responsivo do cabeçalho

Resposta: Testei com essas medidas e deu certo

Teste:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

CSS:

    .apresentacao {

        flex-direction: column-reverse;
        padding: 5% 2%;
    }

    .apresentacao__conteudo {

        width: 90%;
    }

Oi, Victor! Tudo bem com você? :)

Obrigada por trazer seu código aqui no fórum da Alura. É sempre bacana acompanhar o avanço de quem está colocando a mão na massa.

Chamou atenção a forma como você testou diferentes breakpoints e ajustou os estilos com flex-direction, especialmente usando column-reverse, o que mostra que você está explorando bem as possibilidades do Flexbox. Esse tipo de experimentação contribui muito na hora de adaptar o layout para várias telas.

Uma alternativa útil para seus projetos responsivos é aplicar gap diretamente em containers com Flexbox ou Grid, ao invés de usar margin nos elementos filhos. Assim, o espaçamento fica mais organizado e centralizado no CSS:


.apresentacao {
    display: flex;
    gap: 2rem;
}

Esse código define um espaço uniforme entre os elementos do container, sem precisar ajustar cada item separadamente.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!