Next Js App using Tailwind Css and am using flex and Grid
Design comparison
Solution retrospective
Responsiveness: Does the header behave as expected on different screen sizes? Is the mobile menu toggle clear?
Styling: How does the color scheme and styling resonate with the overall design of the website?
Usability: Is the user experience smooth when interacting with the header and the mobile menu?
If you think something can be more good you can just tell me
Community feedback
- @nickcarlisiPosted about 1 year ago
Hi, you did a great job! A few things that jumped out to me at a quick glance...
-
It looks like some of the fonts (fraunces) don't match. The headers and buttons, some links.
-
When you open the mobile menu, it pushes the content below it down. Try making the mobile menu position: fixed or absolute. That way it won't affect the elements around it. You would then need to adjust some of the mobile menu styles, such as width and you can position the menu using top, left, etc. Also, a small but important thing that I think a lot of people forget is adding cursor:pointer to the hamburger menu to tell the user it's a clickable element.
-
The menu links don't seem to go anywhere. You can add an id to each section and then link to the id. For example, the section below the hero could have an id="aboutSection", then in the menu, the a tag would be, <a href="#aboutSection">About</a>. You could do this in the footer menu as well. When doing this, you also want to be sure to close the mobile menu when you click a link, the same way you would when clicking the hamburger. While you're at it, you might want to change the sections from <div> to <section>.
-
The client testimonials section looks a bit crammed when it first changes from column to row. Maybe try a different, larger breakpoint, so it doesn't change to row until a larger screen size that looks a little less crammed. Also, maybe adjust the padding and margin at smaller screen sizes, which would give it more room to "breathe"
Hope those tips are helpful. Happy coding!
0 -
Please log in to post a comment
Log in with GitHubJoin 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