Preview card using HTML and CSS

Community feedback

• 

  Khaled Abdulrahman•60

  @khaleed2002Posted over 2 years ago

  perfect card sizing but why the price on (4 number) is not showing well? and a lot of size on the end of the description also one other thing on the font of (Gabrielle ...) make it Bold it will be better I hope you can fix that issues

  Marked as helpful

  1

  ---

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted over 2 years ago

  @khaleed2002 Thanks for the feedback

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala Rony, beleza? Parabéns pelo seu desafio!

  O componente ficou muito bom e está funcionando quase perfeitamente, tem só uns ajustes que você pode fazer pra deixar ele totalmente responsivo.

  Por exemplo, quando a tela começa a diminuir o texto começa a vazar o container porque você deixou o height fixo e ai ele não consegue crescer mais pra ajustar o texto, pra resolver isso você pode deixar o height deletado, já que a altura do container vai ser determinada pelo padding dos elementos que estão dentro. Olha o código abaixo:

  main {
      background-color: hsl(0, 0%, 100%);
      display: flex;
      width: 600px;
      /* height: 450px; */
      border-radius: 10px;
      justify-content: center;
  }
  

  Outra coisa que você pode fazer é usar <picture> ao invés de usar <img> ai você já pode determinar as duas imagens mobile desktop dentro da mesma tag sem ter que mexer no css ou media query.

  Espero que te ajude e continue codando!

  Marked as helpful

  1

  ---

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted over 2 years ago

  @correlucas Muito obrigado pelo feedback, Lucas! Vou fazer as alterações sugeridas e respostar a solução assim que possível. ;D

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @OliveiraRony Boa, fico feliz em ouvir isso, não precisa repostar, dá pra atualizar essa mesma solução.

  é so ir em solution > solution hub > update solution

  ai voce atualiza o slider com a comparacao do desafio / referencia.

  Toda vez que você atualiza o repositorio no Github automaticamente o live site atualiza tbm, entao é só dar um update aqui msm.

  Marked as helpful

  1

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted over 2 years ago

  @correlucas Muito obrigado por outra informação valiosa, Quanto ao uso da tag <picture> que você mencionou, pode me explicar como eu poderia fazer isso de uma forma simples? Eu conseguiria só usando ela, posicionar a imagem na parte de cima do card?

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @OliveiraRony Olha o exemplo abaixo, a imagem que ta dentro de <img> é a principal e vai aparecer primeiro, ja a outra com <source media..> é a imagem secundaria que vai aparecer depois de 700px, ai é só você mudar a informação que tá la dentro e linkar as imagens.

  <picture>
    <source media="(max-width:700px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
  

  Aqui a documentação caso você queira ler:

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

  Marked as helpful

  1
• 

  Mouhib Eddine Zakaria•160

  @mouhibeddinePosted over 2 years ago

  how did you know the perfect card sizing

  1

  ---

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted over 2 years ago

  @mouhibeddine I didn't know, tried untill I got it. Try putting a design window over your project, and try to get as close to the card sizing as possible. That's the way I got

  1