Profile Card Using Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Busoalmi, Congratulations on completing this challenge!

  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) {
  .profile-review {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 50px;
      border-top: 0.1px solid #cfc8c8;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Busoalmi! 👋

  Congratulations on finishing this challenge! 👏

  The background images are indeed the most challenging part of this challenge. For your reference, I recommend taking a look at Grace's solution on how to handle those circles. The way she handled the background images is easy to understand.

  One suggestion I have is to use a list instead of a div for the profile-review. Also, the statistic numbers are not headings. It makes more sense if the content is a list.

  • 80k followers
  • 803k likes
  • 1.4k photos

  That's it! I hope this helps! 🙂

  Marked as helpful

  0
• 

  Diekololaoluwa•290

  @SOULBRODA023Posted about 2 years ago

  Wow this is pretty good, even though I am new here... when I am about doing mine. I will make sure I do it well with all the helpful corrections here.

  0