1
resposta

07 Lista de exercícios

.cabecalho {
  padding: 10px 20px; /* Ajuste os valores conforme necessário */
  text-align: center;
}
.cabecalho__menu {
  display: flex;
  justify-content: center;
}
.apresentacao {
  display: flex;
  gap: 20px; /* Ajuste o valor conforme necessário */
}
@media (max-width: 700px) {
  /* Estilos para telas com largura máxima de 700px */
}
@media (max-width: 768px) {
  .cabecalho {
    padding: 15px 10px;
  }

  .cabecalho__menu {
    justify-content: space-around;
  }
}

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

Oi, Thamiris!

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

Gostei da forma como você estruturou a responsividade, garantindo uma boa adaptação dos elementos para diferentes telas. A utilização de flexbox e gap melhora a organização do layout.

Ícone de sugestão Para saber mais:

O uso de media queries no CSS permite criar layouts responsivos que se adaptam a diferentes tamanhos de tela. Com elas, podemos definir estilos específicos para dispositivos móveis, tablets e desktops.

Exemplo de media query que altera a direção do layout em telas menores:

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

Quer aprender mais sobre como usar media queries para tornar seu site mais responsivo? Confira estes conteúdos:

- Usando Media Queries - MDN Web Docs

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