HTML + CSS [Flexbox / Media]

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Fala @robertdouglasaimon!

  Seu projeto ficou ótimo!

  Notei que você utilizou margin pra centralizar o card. Usar margens não é a melhor opção pra centralizar elementos.

  📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

  • Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  Neste caso, especificamente, por conta do tamanho do card, você talvez ainda precise utilizar margens no eixo vertical, pois essa técnica centraliza o elemento baseando-se na altura da tela, e como o card é maior que a tela, ele iria ficar encostado no topo e no rodapé da página. Mas na maior parte dos casos, esse código acima funciona muito bem.

  Espero que ajude!

  Fora isso, você fez um excelente trabalho!

  Marked as helpful

  1
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello, I would like to extend my congratulations on completing this challenge. Additionally, I have a suggestion that I believe could enhance your skills.

  main{
  max-width:700px;
  }
  

  • This is not readability format <div class="osH2"></div>
  • Using a descriptive class name like "section-heading" makes it clear to users and other developers what the purpose of the <div> element is, improving readability and maintainability.

  0