Summary Card made with FlexBox

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 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!

  13

  Marked as helpful
• 

  Ljr777•150

  @Ljr777

  Posted almost 3 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

  01

  Marked as helpful