Next Js App using Tailwind Css and am using flex and Grid

Community feedback

• 

  Nick Carlisi•180

  @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