Product preview card component solution (using Flexbox, Mobile First)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

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

  Acabei de ver sua solução aqui e queria te dar um feedback sobre como melhorar a estrutura do componente, sua imagem está escalando sem proporção e um jeito de arrumar isso seria aplicando display: block e max-width: 100% pra deixar ela crescer só dentro do container.

  Um melhor approach seria usar GRID,p construir este componente com 2 colunas tudo que você precisa fazer é criar um bloco principal para conter todo o conteúdo (você pode usar <main> para segurar as duas divs das colunas), defina seu width como max-width: 900px (é o tamanho do contêiner) e display: grid / grid-template-column: 1fr 1fr (isso significa que seu componente terá duas colunas com 50% da largura do contêiner cada uma é ** 450px**).

  Dai o resto seria só organizar as coluna com as informacoes de texto com flexbo e fazer o padding vertical com gap.

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  1

  ---

  

  Douglas Mardegan•140

  @douglasmardeganPosted over 2 years ago

  @correlucas Muito obrigado pelo feedback. Massa demais a visão de alguém já bastante experiente como você.

  Vou aplicar as alterações e utilizarei essas dicas nos próximos desafios.

  Mais uma vez agradeço pela ajuda e foco nas metas e objetivos!

  1