Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Lista de exercicios resolvidos

1.

.apresentacao{
  padding: 0rem 9.375rem 0.625rem 9.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5.125rem;
}

2.

@media(max-width: 1200px){}

3.

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

4.

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

5.

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

6.

@media (min-width: 344px) and (max-width: 1200px){
  .cabecalho__menu{
    justify-content: center;
  }
  .cabecalho{
    padding: 6%;
  }
  .apresentacao{
    flex-direction: column-reverse;
  }
}
1 resposta
solução!

Oi, Valentina! Como vai?

Gostei de ver como você aplicou as @media queries pra ajustar a apresentação no layout responsivo. Isso ajuda a garantir que a página fique bem estruturada em diferentes tamanhos de tela, e o uso de flex-direction: column-reverse; foi uma boa escolha para reorganizar o conteúdo no mobile.

Continue firme nos estudos.

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