Design comparison
Solution retrospective
Hi community :)
Oh my, that challenge was a lot harder than I expected. I had a lot of trouble making it responsive. I decided to use grid for styling and that was actually the first time that I used grid in a frontend mentor challenge. I tend to stick to Flexbox whenever I can but I wanted to challenge myself. Big kudos to Design Course for this tutorial. It help me understand how to use grid-template-areas.
I'm not fully satisfied with the solution and I will definitely improve but I need to do a couple more sites with grid to get some practice. But you know, practice makes perfekt.
Community feedback
- @aashabulPosted almost 2 years ago
your site looks good. But I have found two areas that you can improve.
- letting the mobile menu opened If I change the viewport from mobile to desktop, the mobile menu still remains opened. You can make it more responsive by solving that issue.
- the buttons and other link tags are clickable when the mobile menu is opened. You can increase the z-index of the overlay div to secure all the content in bottom of it so they can't be clicked when the mobile menu is opened. That might be a good practice.
I am also learning. Thanks.
0 - Account deleted
Hi, you can try :
object-fit: contain;this will help with the responsiveness, and the images will not be cropped; give it a try.
Congrats for finish the challenge.
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