Product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala Arthur, analisei essa sua solução aqui também!

  1.Aqui acontece a mesma coisa do outro desafio, a questão do height e o max-width bloqueando o container de ser responsivo, só deletar o valor pra altura e trocar os max-width.

  .container {
      max-width: 600px;
      /* height: 450px; */
      background-color: white;
      overflow: hidden;
      border-radius: 8px;
      display: flex;
  }
  

  2.Pra resolver a questão da imagem, se você usar a tag <picture> dá pra colocar as duas imagens dentro e declarar quando uma deve trocar pela outra, sem usar media query. Da uma olhada na aqui pra ver como montar essa tag:

  https://www.w3schools.com/tags/tag_picture.asp

  3.A imagem não está pegando 100% da coluna porque você definiu a altura dela, tem que colocar ela dentro de uma div e declarar min-height: 100%;desse jeito ela pega altura da vid.

  4.Evita usar id porque é um seletor muito especifico, melhor usar id pra formulários e coisas com Javascript, pra resolver essas coisas melhor só usar classe mesmo bro.

  Espero ter ajudado e continue mandando bala nos projetos. Tmj

  Marked as helpful

  0

  ---

  

  Artur Neri•230

  @Artur-NeriPosted over 2 years ago

  @correlucas, Como você viu, esse aqui ficou bem bagunçado. Obrigado pelo feedback, refatorei o arquivo salvo no meu pc com essas ideias e funciona igual nos meus dois computadores. Só não implementei a tag picture, vou estudar um pouquinho sobre ela, tenho certeza que vai ser um recurso útil na minha caixa de ferramentas. Vlw, dnv!

  0