Profile Card Component

Community feedback

• 

  hitmorecode•6,360

  @hitmorecodePosted about 1 year ago

  Nice well done. I have a few suggestions

  • Add min-height: 100vh; on the body and use flexbox or grid to place the card in the middle of the page. With flexbox or grid you don't need to use margin or position to place the card in the middle of the page.
  • When working with cards avoid giving it a vw or % for the width or height. With vw or % the card will take the given % of it's parent. This means that if the parent gets smaller so will the card. There are occasions where this is handy, but there are also occasions where it's not handy.
  • Give the card a fixed width to avoid the card from shrinking when the screen gets smaller
  • For the profile picture, you gave it position: absolute; with top and left in %. As you can see when the card gets smaller the picture will move according the width. In this case what you want is a static position, so don't use %. Use px, rem or em. This will prevent the image from moving around.

  0

  ---

  

  Sophie•130

  @S0PHI3KPosted about 1 year ago

  @hitmorecode thank you for the advice, very much appreciated!

  0