Great fun with Grid+Flex, CSS-only menus, :has(), .clamp(), no JS
Design comparison
Solution retrospective
I found many great puzzles to solve in this layout. I chose to build the mobile menu with pure CSS, no JS, and I learned quite a bit working out all the details:
-- how to apply a background overlay to the <body> on menu open (and remove the overlay not only on menu-close, but also if the screen is resized past the breakpoint with the mobile menu still open). -- how to change mobile menu icons on open/close. -- how to best divide the desktop layout for Grid/Flex layout. -- How many breakpoints do I need (I ended up doing it with just one, after much experimentation). -- How to best compact the bottom posts on desktop (I went with -webkit-line-clamp)
I avoid looking at other solutions until I finish my own version of the project, but I now intend to check out how others have done this one. Any feedback is very appreciated.
Community feedback
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