Ajustando o layout para telas menores Utilize a propriedade gap na classe .apresentacao para criar espaçamento entre a imagem e o texto, garantindo um layout mais organizado em telas menores. .apresentacao { display: flex; gap: 20px; /* Ajuste o valor conforme necessário */ }
Implementando media queries para mudança de layout Implemente uma media query que reposicione a imagem acima do texto em telas menores que 1023px, mudando a direção dos elementos para uma coluna. @media (max-width: 1023px) { .apresentacao { display: flex; flex-direction: column; } }
Refinando o layout responsivo Use a propriedade flex-direction: column-reverse na media query para inverter a ordem dos elementos na classe .apresentacao em telas menores que 1200px. @media (max-width: 1200px) { .apresentacao { flex-direction: column-reverse; } }
Ajustando o cabeçalho para telas menores Altere o padding da classe .cabecalho para centralizar o cabeçalho e melhorar o espaçamento em telas menores. .cabecalho { padding: 10px 20px; /* Ajuste os valores conforme necessário */ text-align: center; }
Centralizando itens do menu em telas menores Verifique se display: flex está aplicado e use justify-content: center na classe .cabecalho__menu para centralizar os itens do menu. .cabecalho__menu { display: flex; justify-content: center; }
Refinando o design responsivo do cabeçalho Ajuste o padding e as propriedades do flexbox para alinhar visualmente o cabeçalho com o design do Figma em telas menores. .cabecalho { padding: 15px; /* Ajuste conforme necessário */ }
.cabecalho__menu { display: flex; justify-content: center; }
Teste e ajuste os valores para garantir que o cabeçalho fique conforme o design esperado.