Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro Section with dropdown navigation

Jack 490

@Jack-WebDev

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any advice will be great :)

Community feedback

P
Ben 🌌 570

@bengera

Posted

Hi Jack. Nice work!

A few little things I noticed that you can change / add for slight improvements.

  • Add border: 1px solid to your more button so that when you hover it doesn't move your content. I think the other buttons and links have a similar problem because the weight is changing on hover.

  • Wrap your whole page, give it a max-width value and center it so the page content stays together on larger screens.

  • Add a gap property to your flex element 'item__info' so the links are a bit more spaced out.

  • You could remove the position:absolute on the down and up icons so they don't overlap the company and features links when resizing to a smaller screen. (for desktop menu)

  • Giving your 'item-info' element a min-width on desktop stops the links from overflowing out of the div when you resize.

  • Add a bit of JavaScript so the mobile menu and overlay is removed when resizing the browser to a larger (desktop) size.

Cheers 👍

Marked as helpful

1

Jack 490

@Jack-WebDev

Posted

@bengera 🤣🤣🤣I kept wondering what was causing my content to move on hover.

Thanks I'll try these recommendations😁

0

Please log in to post a comment

Log in with GitHub
Discord logo

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