Entrar Ainda não tem acesso?
2
respostas

[Projeto] Responsividade

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e atividade Lista de exercícios

por Estudante
| 33.8k xp | 47 posts

Ajustando o layout para telas menores:

}
.apresentacao{
  gap:82px;

Implementando media queries para mudança de layout e refinando o layout responsivo:

@media (max-width:1200px) {
     .apresentacao{
    flex-direction: column-reverse;
  }
}

Ajustando o cabeçalho para telas menores, centralizando itens do menu em telas menores e refinando o design responsivo do cabeçalho:

@media (max-width:1200px) {
  
.cabecalho {
    padding: 10%;
  }
.cabecalho__menu {
  justify-content: center;

}
.apresentacao{
    flex-direction: column-reverse;
  }
}

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

2 respostas
por Rafaela Petelin Silvério
| 728.4k xp | 1628 posts
Alura Scuba Team Monitora de Fórum

Oi, Estudante! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou as media queries para adaptar o layout em telas menores. A abordagem de usar flex-direction: column-reverse; na .apresentacao pode ajudar bastante na reorganização dos elementos.

Uma dica útil para melhorar a responsividade é definir max-width para evitar que os elementos fiquem muito largos em telas grandes. Por exemplo: 


@media (max-width: 768px) {
  .apresentacao {
    max-width: 90%;
    margin: auto;
  }
}

Isso garante que o conteúdo fique mais ajustado em telas menores sem perder a estrutura.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Estudante
| 33.8k xp | 47 posts

Obrigada!