Profile Card Component using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Peteksi95, Congratulations on completing this challenge!

  👨‍💻 Here are some tips to improve your solution code:

  Your solution its already good, something you can do to improve the card responsiveness is create a media query for the stats section and make each stat number stay in a different row after max-width: 350px using a media query, here's the code for that:

  @media (max-width: 350px) {
  .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
  }
  }
  

  To reduce your CSS file and improve the performance of loading your page you can use a tool called CSS minify that reduces the CSS code by removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Petri Saari•120

  @Peteksi95Posted about 2 years ago

  @correlucas Thank you very much for your feedback. I will definetely look into CSS minify, sounds very useful

  0