Profile card component main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Manu, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  To place the image between the header and the content block, it's better to use a negative margin instead of using position: absolute/relative to have more control over the image when the container scales. Using position relative the image moves when the container gets narrow.

  @media screen and (min-width: 900px)
  .container .heroInfo .profile-pic {
      /* left: 9.2rem; */
  }
  .container .heroInfo .profile-pic {
      /* position: absolute; */
      /* top: -3.9rem; */
      margin-top: -123px;
      /* left: 7rem; */
      /* overflow: hidden; */
  }
  

  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 .box {
      padding-top: 1.2rem;
      padding-bottom: 1.7rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
  }
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  0