Profile card component using React

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @miguelzaga, Congratulations on completing this challenge!

  You did a good job here putting everything together. I’ve some suggestions for you:

  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) {
  .card__stats {
      border-top: 1px solid #e8e9ec;
      justify-content: center;
      gap: 40px;
      padding: 24px 52px 24px 41px;
      display: flex;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Miguel•640

  @miguelzagaPosted about 2 years ago

  @correlucas Thanks for the suggestion!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @miguelzaga, great job on this project!

  Some suggestions to improve you code:

  1. For accessibility purposes, it's best to use rem/em instead of px for your CSS property values.

  2. To make it easier to deal with CSS , have more control over your content, and want to ensure that everything will look the same regardless of browser used I suggest taking a look at CSS Resets.

  CSS Resets are customizable for your preference.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  Happy Coding!

  0