Profile Card - CSS flex box

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Pon Huang! 👋

  Congratulations on completing this challenge! 🎉

  Yeah, positioning the background images is the hardest part of this challenge. For this, I would recommend looking at the @ApplePieGiraffe's solution. He had done a great job of positioning the background images. He managed to make all the circles position correctly on all screen sizes.

  Some suggestions from me.

  • For the profile-state, I would recommend making it a list element. If the site has no styling, it would more likely be a list.
    • 80K followers
    • 803K likes
    • 1.4K photos
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

  Hope this helps. 🙂

  2

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @vanzasetia Thanks for sharing ApplePieGiraffe's solution, it is amazing. And also the suggestions help a lot 😃 Thank you

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @ponhuang You're welcome! 👍

  1
• Account deleted

  I'm not sure about the background but I see you're having issues with centering the content so that it's in the middle of the screen, at least on the desktop. If you set a height of 100vh (100% of viewport height) on the body element the cards will be fully centered. Currently your body elements are too short to see the effect of flexbox.

  1