Responsive landing page using css flex grid

Community feedback

• 

  Vinicius Henrique•590

  @viniciusshenri96Posted over 2 years ago

  @MarcoFranca Eaí Marco, blz? Parabéns, por finalizar o desafio, este projeto foi um grande desafio pra mim e me deu algumas dores de cabeça no responsivo haha, tava lendo aqui seu código, e vou te dar algumas dicas que podem te ajudar a melhorar:

  • No seus @media queries não usar px, utilize unidades rem ou em, mas aconselho o em, ele é mais consistente entre os browsers.
  • Tente usar mais rem ao invés de px principalmente em tamanhos de fontes, é melhor para a acessibilidade.
  • Eu usaria o <a> , quando o botão é um link para um conteúdo da página ou conteúdo externo, <button> é melhor usar quando queremos enviar algumas informações para o servidor, exemplo algum formulário.
  • Use uma classe chamada container, para definir a largura máxima da página e centralizar, por exemplo max-width: 1190px, observa seu footer, ele parece ser maior na página, a largura tá maior do que a <section class="galery">, você definindo um container, garante que o seu layout vai ficar alinhado corretamente na página, você pode olhar minha solução e observar, exemplo:

  .container {
    max-width: 1110px; // define a largura máxima da página
    padding: 0 40px; // não deixa os elementos encostar na borda da página quando diminui a tela, aconselho você a testar comentando essa linha no código e diminuído a tela.
    margin: 0 auto; // centralizar todo o conteúdo
  }
  

  Bom trabalho, continua praticando, não para não!

  Marked as helpful

  1

  ---

  

  Marco Tullio•90

  @MarcoFrancaPosted over 2 years ago

  @viniciusshenri96 Oi Vinicios, tudo bom? Muito obrigado pelo feedback tão detalhado... Me fez enchergar pontos que não havia me atentado, inclusive dei mais uma estudada nas unidades de medida, pois realmente faz toda a diferença na acessibilidade.

  1