1
resposta

[Sugestão] media query

Meu código só funcionou corretamente trocando os media querys passados pela professora, @media screen and (min-width: 1728px) e @media screen and (min-width: 1024px), por @media screen and (min-width: 768px) e @media screen and (min-width: 1024px). Exemplo do meu rodape:

@media screen and (min-width: 768px) {
    .rodape {
      display: flex;
      justify-content: space-around;
    }

    .lista-rodape {
      display: block;
    }

    .lista-rodape__item {
      display: flex;
     align-items: center;
     margin: 0.6em 0;
    }

    .lista-rodape__link {
      color: var(--cinza);
      text-decoration: none;
      margin-left: 0.6em;
    }

    .lista-rodape__titulo {
      font-size: 14px;
      color: var(--cinza-claro);
    }

    .rodape__titulo {
      font-size: 24px;
    }
}

@media screen and (min-width: 1024px) {
  .lista-rodape {
    border-left: 1px solid var(--cinza-claro);
    padding-left: 1em;
  }

  .rodape {
    padding: 3em 0;
  }
}
1 resposta

Oi Aline!

Que bom que você encontrou uma solução que funcionou para o seu projeto!

O conceito de mobile-first é exatamente esse: começar com o estilo para dispositivos menores e, gradualmente, adicionar estilos para telas maiores. Ao definir um breakpoint em 768px, você está focando em tablets e, com 1024px, em desktops pequenos.

Se você está satisfeito com o resultado visual e ele atende aos requisitos do projeto ou do design que você está seguindo, essa é uma ótima abordagem. Lembre-se de que não há uma regra fixa para os breakpoints,eles devem ser ajustados conforme a necessidade do projeto e o público-alvo.

Bons estudos!

Sucesso

Imagem da comunidade