Stats preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Great work on this challenge! Your solution looks pretty good! 😀 I like the counter animation! 👍

  Some feedback on this solution.

  • I would recommend adding some padding on the top and the bottom of the body element to prevent the card from having a full height on a mobile device.
  • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it.
  • I would suggest adding a max-width to the card so that it doesn't become too wide on the one-column layout.

  Keep up the great work! Happy coding! 😁

  Marked as helpful

  1

  ---

  

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  @vanzasetia Hello Vanza, Thank you so much for the wonderful feedback You showed me the right way to set font root, which I did ineffective until now. I had a problem with setting the font root to be 62.5% like this when using bootstrap. I edited this challenge but I also think I should edit the other challenges too.

  Thank you again

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @gerichilli You're welcome! Yeah, changing the root font size can be dangerous, especially when working with a CSS framework or any library.

  One thing, I notice that you set the list-style: none; to all elements which I think should only be for the ol and ul elements. Since, making the list-style: none; make the ul element lost the semantic meaning so, you need to add role="list" attribute to the ul element.

  Marked as helpful

  1

  

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  @vanzasetia Thank you so much, I have learned a lot from you

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @gerichilli No problem! Glad to help you! 😉

  0