Responsive card

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello again Eliseu! congrats on your second challenge! you are progressing on time!

  Apart from what Lucas said, I would also recommend you to use the <picture></picture> tag with two <source> tags instead of an img that does display: none.

  With the picture and source tags, you can add both images into your html, and you can set the width and display them at those widths, remember that your source tags contains the images, and the source tags are wrapped around the picture tag.

  You can learn more about the picture tag in the MDN docs: https://developer.mozilla.org/es/docs/Web/HTML/Element/picture

  Hope my feedback helps you in future projects!

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

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

  Sua solução ficou muito boa, gostei do emoji do carrinho de compras.

  Minha dica pra você é pra arrumar o erro que está ocorrendo na imagem, que está distorcendo quando o container começa a escalar.Pra arrumar isso você pode usar display: block e max-width: 100% pra fazer a imagem crescer só a largura do container e object-fit: cover pra melhorar a responsividade e fazer um crop quando o container começa a diminuir.

  main img {
      max-width: 50%;
      height: 100%;
      border-radius: 8px 0 0 8px;
  }
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0