3-card component using CSS grid and flexbox
Design comparison
Solution retrospective
I struggled with keeping the links all in line with each other and initially had to give each card description its own class, but somehow once I changed the letter spacing it became more even. I consulted the design multiple times to make sure that the padding and width were in line with the specifications. I am unsure about my use of grid because originally I used 5 columns but ended up with 10 in order to make the cards wider.
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello, Elizabeth! 👋
It's great to see you completing another challenge! 👏
Regarding the issue, I would recommend making the
bodyelement as the flex container to put the cards in the middle of the page. After that, set amax-widthon the container of the cards element (the.cardselement) to prevent the cards from becoming too large on widescreen.Some recommendations from me.
- I recommend learning how to write a good alternative text for images. Alternative text should not be hyphenated (like code) and there's no need for the word "icon". Also, not all images need alternative text.
- I would not suggest changing the
htmlor the:rootfont size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.
That's it! Hope this helps.
0
Please log in to post a comment
Log in with GitHub
Join 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