Responsive profile card component using flexbox, grid & mobile first

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there! Your solution looks great.

  On my opinion you can improve this things:

  • try to avoid overwrapping. You use 4 elements as a card wrapper : main > section > .container > .cards-container

  Instead of this you can simply set to the body these styles:

  display: grid
  place-items: center
  

  It will be enough.

  • Instead of using a svg image, you can use a background image. You could convert svg to background with SVG encoder.

  • it's a bad idea to use the aside element as a card wrapper. It is more suitable for panels. You can use section instead.

  • There is no reason to complicate selectors here. You can simply use single .stats selector.

  .more-details .stats
  

  I hope my feedback will be useful.

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  1