Responsive Stats preview card component usig flexbox

Community feedback

• 

  Benjo Quilario•1,810

  @benjoquilarioPosted almost 3 years ago

  Hey @shameerkamaludeen

  Great job on finishing this one. It looks good and response rather well.

  • It looks response in my screen😅
  • I think 'mix-blend-mode' is also one of the best solution as you don't need to add another CSS property, one of suggestion is using pseudo-elements like ::before or ::after.
  • You can both use flex or grid as this two is great for responsiveness. If designs is two-dimensional use grid, if designs is one dimensional use flexbox instead. You need to decide to yourself of what you want to use, as these two will make your website responsive.

  Some suggestion:

  • Use unordered list <ul> for .stats-wrapper. HTML lists are used to present list of information in well formed and semantic way.

  • Remove margin: 8.5em 0; on your .stats-card. Because you already declare the main tag

     display: flex;
     align-items: center;
     justify-content: center;
  

  the child is already centered as the margin don't have any use at all.

  Aside from those everything is great👍. (Sorry for the bad English as I'm still practicing😅)

  Keep coding and Good luck

  cheers, Benjo

  Marked as helpful

  2

  ---

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted almost 3 years ago

  Thank you very much @benjoquilario for your valuable time, especially the suggestion on making a list of stats is a really great one, I used to follow that but forgot to use it here, thanks for your reminder.

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @shameerkamaludeen, Fine work!

  0

  ---

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted almost 3 years ago

  Thank you @optimusprime202

  0