Product preview card, mobile first

Community feedback

• 

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  Ola Larissa, tudo bem? Parabéns por concluir o desafio, a solução ficou realmente bem parecida. 🎉🎉 Se você me permite, gostaria de pontuar algumas melhorias para essa solução:

  • Ao inves de utilizar display block, absolute, relative e outros para posicionar os elementos da maneira que deseja, você pode utilizar display:flex e alinhar os elementos de forma flexivel dentro de uma box que vai se ajustar dependendo do tamanho da tela.

  More Info for FlexBox

  • Ademais, notei que você utiliza margem para gerar espaço entre os elementos, você pode substituir esse tipo e atividade pela propriedade gap, juntamente com o display flex.

  More info for Gap

  • Para centralizar o seu container principal no meio da tela, você pode utilizar as seguintes propriedades:

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

  • Por fim, caso você se interesse em aprender mais sobre padrões de projeto no css, recomendo a leitura sobre ITCSS, SMACSS ou/e BEM.

  Parabéns novamente pela solução, qualquer dúvida pode me chamar. Caso meus comentários tenham sido útels, não esqueça de marcar como útil. Happy Coding! 😊

  0