Profile card component challenge

Community feedback

• 

  Tobias•100

  @ToHXPosted almost 3 years ago

  Hi, thanks for you feedback!

  I'm actually a bit confused, as I did learn that I shouldn't use width with this card, because this will give it a fixed width which will introduce problems for the responsibility.

  Also, for font you should never use px, always use rem. This won't make your side inclusive.

  1

  ---

  

  T

  Grace•30,990

  @grace-snowPosted almost 3 years ago

  @ToHX yep I wouldn’t recommend the advice above. Max width would be better on this card as it lets the component shrink if needed on smaller screens. This is touching the sides of my phone screen at the moment. A little margin and max width on the card would fix that.

  I think this solution looks pretty good. A few small suggestions

  • you need a heading element in this
  • profile picture is not great alt text for that image. The persons name would be better. Never write words like “photo/image/picture” in alt text as it is already an image element.
  • you could use a he element for the line (if you want it to have semantic meaning as a divider) or even a border. It’s best not to add empty divs cluttering your html if you don’t need to
  • don’t forget small details like the shadow on the card. Designers care about these details

  Good job and good luck on the next one

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this project. You out time to finish this one and looking at your solution you did well. I would suggest these for you...

  • Inside the .card rule set, remove the padding-left: 1rem; and padding-right: 1rem;. Add width: 330px;
  • Add font-size: 11px; in the rule set of .card-bottom-grid span
  • Add padding: 0 1rem; in the rule set of .card-bottom-grid p

  Hope this helps and Keep going!

  0