Stats preview card mobile-first using flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Jullierme Rodrigues Gomes!

  I have some feedback on this solution:

  • Your card get cut off on my mobile device. Try to find what causing it and fixing it.
  • Add padding to your body style, to prevent the card having full width and height on mobile users.
  • section tag must have heading tag inside it. Consider using div to wrap the picture element.
  • For the stats, I recommend to use ul and li instead of a div. Also, the stats number is not a h2. Remember, heading tags usually use for titling a section. I recommend to use strong or em tag, if it you want to emphasize the element.
  • Why do you change the HTML or the root font size, if you use px at the end of the day? Also, I don't recommend to cut the root font size to 62.5%. It's recommended to keep the default HTML font size which is 100% to prevent unexpected behavior from all devices and browsers.
  • Use rem or sometimes em. Using px will prevent the user to control the size of your page, based on their browser setting.
  • In this case, the image is decorative only, which means you can just leave the alt="" empty and add aria-hidden="true" or role="presentation", to make sure that the screen reader ignore those images.
  • Use shorter version of the hex color code, like instead of #ffffff, I recommend to write #fff. It's much shorter and do the same thing.

  That's it! Hopefully this is helpful!

  Marked as helpful

  2