Entrar Ainda não tem acesso?
1
resposta

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 Viviane De Lima Noronha
| 25.9k xp | 52 posts

Respostas de 1 ao 6:

1) .apresentacao {
        gap: 80px;
      
    }
    
2) @media (max-width: 1025px) {
.apresentacao {
       flex-direction: column;
    }
}

3) @media (max-width: 1200px) {
 .apresentacao {
        flex-direction: column-reverse;
    }
    
4) @media (max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }
    
5)  @media (max-width: 1200px) {
      .cabecalho__menu {
          justify-content: center;
      }
  }
  
 6) @media (max-width: 1200px) {
    .cabecalho {
        padding: 15%
    }
1 resposta
por Renan Lima
| 4087.7k xp | 8715 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Viviane. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Gostei de como você utilizou media queries para ajustar a responsividade do layout. A organização das regras mostra um bom entendimento da estrutura CSS.

Uma dica interessante: você pode consolidar media queries repetidas para otimizar o código, evitando redundâncias. Veja este exemplo: 


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

Isso reduz a repetição e melhora a manutenção do código.

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