Summary Card made with FlexBox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @HawkEyeB, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  2.Remove the background and the image bg from the container and add to body to make sure this will display full screen and not get cropped.

  3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  .information-card {
      display: flex;
      grid-template-columns: 30% 40% 30%;
      align-items: center;
      background-color: hsla(225, 100%, 94%, 0.267);
      border-radius: 1em;
      padding: 1em;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Pedro Ingro•150

  @HawkEyeBPosted about 2 years ago

  @correlucas Eu esqueci de por o block e acabei nem notando de tão bem que o código funcionou dessa vez.

  Eu não entendi a alteração proposta. Poderia me explicar melhor?

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @HawkEyeB Era só pra deixar o card mais responsivo e deixar a seccao de preço em duas linhas dps dos 340px quebrando o texto.

  0

  

  Pedro Ingro•150

  @HawkEyeBPosted about 2 years ago

  @correlucas Eu li em algum documento que não se preocupar muito abaixo de 375px devido a quase nenhum dispositivo hoje em dia ser desse tamanho (Exceto smart watch). É verdade?

  0
• 

  Ljr777•150

  @Ljr777Posted about 2 years ago

  hey, I enjoyed this one. Learnt a lot from reading your code(just add a little more comments)and its responsive yayy!🎊

  I think the color of the shadow bottom for (.btn-confirm) should be a little more on the purple side Use maketintsandshades.com to get different shades or tints of any color

  Marked as helpful

  0

  ---

  

  Pedro Ingro•150

  @HawkEyeBPosted about 2 years ago

  @Ljr777 Hey. Thanks, I'm surprised about the code as well. Everything went too smooth rs. Where I'm studying, the teacher say to use comments only to important stuff and avoid unnecessary comments so as not to pollute the code.

  The shadow bottom, I'm can't even understand what color to use, because the image example barely show the shadow as well.

  0