Product Preview Card Component w/ Flexbox & @media

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Oi Paula, tudo bem? Parabéns pelo desafio!

  Muito boa a sua solução, toda estrutura do html e a semantica estao perfeitas. A unica coisa pra melhorar é a responsividade do card removendo todos width e substituindo por max-width a diferença entre width e max-width é que width é fixo e max-widthdeixa o card com um tamanho maximo mas pode diminuir tbm.Pra fazer com que a 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
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Paula, congrats on finishing the challenge! pretty good job!

  To answer your question, I'm testing your project and it is working fine, the breakpoint is happening at 600px and not at 375px thanks for this selector:

    @media (min-width: 600px)
  section {
    width: 600px;
    height: 450px;
    display: flex;
  }
  

  For the images, instead of using display: none, you can use the <picture></picture> tags with two <source> tags, and put the images there in the source tags, then you can render conditionally depending on the size of the screen, you can learn more about the picture tag here.

  Hope my feedback helps you for future challenges!

  Marked as helpful

  0

  ---

  

  Paula Rodrigues•250

  @paulaabroPosted about 2 years ago

  @DavidMorgade after I posted I taught better and changed the breakpoint...hahaha Found this <picture> tag facinating. Thanks for the tip

  1