3 column preview card component with Flexbox

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Islandstone89
Good job. Here are some suggestions:
HTML:
-
Change
<article>
to<div>
. -
I would use
<img>
for the icons. When you have them as inline SVGs, you must addaria-hidden="true"
andfocusable="false"
, so screen readers can ignore them. The reason we want them to be ignored is that they are purely decorative.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Remove the width on the individual cards.
-
Add a
max-width
in rem on the card container, so it doesn't stretch too wide on big screens. -
Media queries should be in
rem
, and it is common to do mobile styles as the default. I would use Grid for this challenge, as we want 3 equal columns on larger screens.
Marked as helpful -
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