Stats preview card component / Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Yohan-Marques!

  I have some feedback on this solution:

  • I have a recommendation on selecting element on CSS, instead of writing something like this, which is the increasing the specificity unnecessarily.

  p.text-1 {
      color: hsla(0, 0%, 100%, 0.6);
      padding-top: 30px;
      padding-right: 50px;
      line-height: 2;
      font-size: 14px;
  }
  

  • Try to select it like this:

  .text-1 {
      color: hsla(0, 0%, 100%, 0.6);
      padding-top: 30px;
      padding-right: 50px;
      line-height: 2;
      font-size: 14px;
  }
  

  • That is also apply on div.conten and div.photo.
  • Try to use rem unit, since it will allow the user to change their font-size based on their setting.
  • Try to add padding on your body to prevent the card to fill all screen on mobile screen size (<400px width).

  That's it! Hopefully this is helpful!

  3