CSS flexbox solution for profile card

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  This looks OK, just needs the shadow adjusting a bit to get closer to the design.

  Here are recommendations for the code

  • remove the h3s from the stats (numbers don't make sense as headings) and change the element wrapping each number and word to something meaningful, like a list item or paragraph
  • you don't need a divider div. If you want a divider in the html, use a HR. If not use a border bottom on the content or border top on the stats
  • looking at css I can't work out why you're using so many transforms or quite a few things tbh... For example margins and paddings seem to be being applied inconsistently
  • font sizes must never be in px, use rem/em
  • line height should be unitless like 1.5
  • you shouldn't need widths and heights on the card. Just max-width and a min-height on the card header. The rest of the sizes can be controlled by the content

  I hope you try these things out and they help you

  2

  ---

  

  Nebiyou Ersabo•185

  @NebiyouErsaboPosted over 3 years ago

  @grace-snow Great feedback, I'll look more into the code and try to improve the issues you mentioned. Thank you, Grace!

  0