Submitted about 3 years ago
Stats preview card mobile-first using flexbox
@jullierme-r
Design comparison
SolutionDesign
Solution retrospective
Any feedback and tips are appreciated.
Community feedback
- @vanzasetiaPosted about 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 yourbody
style, to prevent the card having full width and height on mobile users. section
tag must have heading tag inside it. Consider usingdiv
to wrap thepicture
element.- For the
stats
, I recommend to useul
andli
instead of adiv
. Also, the stats number is not ah2
. Remember, heading tags usually use for titling a section. I recommend to usestrong
orem
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 to62.5%
. It's recommended to keep the default HTML font size which is100%
to prevent unexpected behavior from all devices and browsers. - Use
rem
or sometimesem
. Usingpx
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 addaria-hidden="true"
orrole="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 helpful2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord