My profile card challenge solution using just HTML and CSS

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Hi,

  I have some suggestions to help you improve this, hope they're helpful

  • use min-height, not height on the body. It's causing overlap of your footer and card on mobile
  • min-width: 360px on the card is a problem. Do you need a min-width on it? I wouldn't have a width or min width on that, just a max. Let it be flexible enough to work on small phone screens.
  • similarly, only put height on when elements need it. Looking at this, I would only have a height (or min-height) on the card header, and maybe the profile image
  • to position the profile image correctly, I would try a different method like a negative margin to pull it down or up. (Don't forget to give that image a description in the alt attribute too)
  • the font is way too small at the moment. Try to be explicit with font sizes and add it in rem units wherever needed.
  • remember the small details like shadow on the card.

  Overall, the markups pretty good and solution is getting there. It just needs a little refinement, mostly on styles

  0

  ---

  

  Vernon•60

  @VernonDodoPosted over 3 years ago

  @grace-snow Thank you for your feedback; it was definitely valuable. I'm going to implement all your suggestions to improve on my original submission.

  0