Product preview card component solution

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala João, tudo bem? Parabéns pelo desafio!

  Ótima solução irmão, tenho umas dicas pra vc melhorá-la ainda mais:

  1.O tamanho do container é um pouco maior, pra vc ter o ajuste perfeito, use max-width: 900px

  2.Faltou também colocar o alt text pra imagem ser reconhecida por leitores de tela.

  3.Para tornar sua imagem totalmente responsiva, adicione display: block e max-width: 100% e object-fit: cover para fazer o corte automático da imagem ao redimensionar dentro da coluna:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  João Júnior•110

  @joao-juniorPosted about 2 years ago

  @correlucas Obrigado pelo feedback irmão, gosto muito de comentários. Pude arrumar o código, excerto no caso do container: {max-width: 900px} o card acaba quebrando quando a tela tem entre 380 e 580px de largura então optei por deixar a largura em unidade relativa de 20rem... Me avisa se não for uma boa pratica... Ah eu acabei de postar mais uma solução para um desafio um pouco mais díficil, se puder deixar seu feedback, o link é https://www.frontendmentor.io/solutions/intro-component-with-signup-form-R-ojzL3TSd

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @joao-junior vou ver agora irmão

  0