flexbox and grid and absolute positioning for layout, and JS for nav
Design comparison
Solution retrospective
It took me some time to get as close as I can to the original design but still couldn't make it look exactly like it, but I think I got pretty close, and making the mobile navigation work was a chalenge, I had to do it twice to figure it out, but it still is not perfect, still have some details to iron out, and the responsiveness of the website is only adequate and still have work to be done to make it perfect. but over all I think I got pretty close to the original design and I think the website still looks great, with no major issues.
I don't have specific questions but any advice would be appreciated , thank you.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Rachid Ben, I think you did a really great job in getting this to look really close to the design! The functionality is there too; I did see the "Register" button jumping to the Login link at around the 650px breakpoint, so you might need to find another breakpoint, maybe around 720 or 730px.
One thing to look into for later is, when the viewport is smaller than the contents of the mobile nav, I can't scroll further down to see the rest of the nav. I had this problem as well and it was pointed out to me. I have a CodePen that I built as a practice/draft for the site, and you check out the nav bar there to see how I got it to scroll: https://codepen.io/elaineleung/pen/poLpzge
Once again, great job 🙂
0@rachidbendPosted over 2 years ago@elaineleung Hi Elaine, thank you so much for your feedback, I changed the mobile nav breakpoint like you suggested and now that issue is resolved. I checked out your code pen and learned a lot from it, and i gotta say your code is very clean and clear, I understood what you wanted to achieve quickly, and I added 'overflow-y: scroll;' to the nav and fixed the position of the body when the nav is open and now the navigation works better. Thank you so much Elaine for helping me 🙂
1@elaineleungPosted over 2 years ago@rachidbend Great that you got it sorted, and glad to hear I could help! 🙂
1
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