Profile card component using flexbox

Community feedback

• 

  Mike Cheshire•410

  @mixchexPosted almost 2 years ago

  Hi Leonardo,

  This is a great effort and very close to looking just like the design.

  That space you've found has been caused by your transform property. By using this, the space has been left, but if you use a negative margin-top it will help move the lower content up at the same time.

  I hope this resolves your issue. Great work.

  Mike

  Marked as helpful

  1

  ---

  

  Leonardo Henrique•130

  @henrikkudesuPosted almost 2 years ago

  @mixchex Yeaaah, it worked. Now is looking the very same as the original project. Thank you!

  0

  

  Mike Cheshire•410

  @mixchexPosted almost 2 years ago

  @henrikkudesu Great to hear and glad it worked.

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .profile-card on the page using flexbox, replace the height in the main with min-height: 100vh.

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  For a responsive content, replace the width in .profile-card with max-width.

  Give . personal-info a fixed margin-top and bottom value, instead of margin: auto; margin: 16px 0; and add a text align-center to it.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Leonardo Henrique•130

  @henrikkudesuPosted almost 2 years ago

  @Hassiai Thank you for your tips. I've done these adjustments and worked fine!

  0