Responsive Four Card Feature Section with BEM, CSS Grid, and Flexbox

Solution retrospective
Hey everyone!
It took me a while to wrap my head around laying this one out. I would really appreciate any feedback on my semantic HTML, my use of Grid and Flexbox here, and the overall responsiveness of the page. If anyone has any suggestions on ways that I can improve the layout in order to make it more effective, please let me know!
I also used BEM for the second time on a project here, and any feedback or comments on how I could improve would be really appreciated.
Thank you so much!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hey, this looks really good, well done!
Only small suggestions quickly
@media screen and (min-width: 535px) { .wrapper { /* grid-template-areas: "cyan red" "cyan red" "orange blue" "orange blue"; */ grid-template-areas: "cyan red" "orange blue"; } }
I changed this above, because you don't need 4 rows at this screen size. The items were actually in the incorrect grid areas.
Figure is incorrect semantics for these cards. Only use figure when you need figcaption. They should just be Divs IMO, there's not enough content there to justify articles
The
main__figure-img
images are decorative / meaningless so should not have alt text. Instead, change toalt=""
andaria-hidden="true"
orrole="presentation"
Good luck
Marked as helpful - @vanzasetia
👋Hi Brendan!
This looks great 🙌 on both landscape and portrait on my mobile device. 👍Good job! 👏
I have some feedback on this solution:
- For each title for every figure, It should not be a heading two. Heading tags only for titling a section. I recommend to use
p
andstrong
tag. - In this case, all images are decorations. So, it's best to leave the
alt=""
empty. That way, the screen reader will ignore those images.
That's it! Hopefully this is helpful!
Marked as helpful - For each title for every figure, It should not be a heading two. Heading tags only for titling a section. I recommend to use
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