1
resposta

Faça como eu fiz: ajustando o layout para mobile.

Referente ao curso CSS: aplique responsividade usando media queries, no capítulo Dispositivos mobile e atividade Faça como eu fiz: ajustando o layout para mobile

por Estanislau Antonio da Silva Junior
| 73.3k xp | 256 posts

. container

.container {
/* width < 768px */
@media (max-width: 768px) {
  width: 674px;

  /* width < 425px */
  @media (max-width: 425px) {
    width: 299px;
  }
}
}

Ajustando o layout.

.banner__texto-principal {
  @media (max-width: 425px) {
    padding: 0;
  }
}

.cabecalho__lista {
  @media (max-width: 425px)
 display: none;
  }

ordem de seção quem somos.

.quem__somos {
@media (max-width: 425px) {
    flex-direction: column-reverse;
    gap: var(--gap-l);
  }
}

  .quem-somos__texto-principal {
  @media (max-width: 425px) {
    width: 100%;
    align-items: stretch;
  }
}

Ajustando o alinhamento.

  .sobre-nos__beneficios {
@media (max-width: 425px) {
    text-align: center;
  }
}

  .sobre-nos__beneficios--card {
    width: 100%;
  }
}
1 resposta
por Lorena Garcia
| 11914.5k xp | 17869 posts
Alura Scuba Team

Oii, Estanislau!

Que legal ver você colocando a mão no código e ajustando tudo pra ficar mais amigável no mobile.

Você tá usando bem as media queries e aplicando ajustes pontuais que realmente fazem diferença na experiência em telas menores. Só queria destacar algumas coisinhas pra te ajudar a melhorar ainda mais:

  • Sugestões de melhoria no seu CSS:

  1. Cuidado com a sintaxe das media queries dentro da classe:

    • Em CSS puro, as media queries devem ficar fora do seletor da classe. Exemplo:

    Assim não:

 .container {
    @media (max-width: 768px) {
      width: 674px;
    }
  }

Maneira correta:

@media (max-width: 768px) {
  .container {
    width: 674px;
  }
}
  1. Mesmo cuidado com outras classes, como .banner__texto-principal, .quem__somos, .sobre-nos__beneficios etc. Todas essas media queries devem envolver o seletor de fora pra dentro.
  • O que você mandou bem:
  • Uso do flex-direction: column-reverse pra reorganizar a seção "quem somos" — ótima ideia pra dar destaque ao texto primeiro no mobile!
  • Ajuste no text-align: center e largura 100% nos cards — isso deixa tudo mais legível e bem distribuído.
  • Está usando bem o gap com var(--gap-l), o que mostra atenção ao design system!

Continue testando esses ajustes com o DevTools do navegador pra ver o resultado em tempo real.

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