Submitted 7 months ago

Responsive dropdown intro-section landing page

Lamidi Morufat• 140

@Ehmkayel

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Intro section with dropdown navigation

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is my first time of working on a project with two dropdowns, I'm glad I was able to do it

What challenges did you encounter, and how did you overcome them?

I encountered some challenges with the dropdown but I was able to debug it with the use of my elements in inspect

What specific areas of your project would you like help with?

I will be glad if anyone can go through my project and suggest what I need to work on

Community feedback

Jake Godsall• 1,390

@jakegodsall

Posted 7 months ago

Hi 👋

Great work on the project. It looks like you've really nailed the sizing for the content of the page and the dropdowns look great.

In terms of responsivity there is a couple of issues you could work on:

The content of the page is not centred on larger viewports. As I understand it you have a max-width: 1440px set on your <body> tag. This would be better located on this outermost <main> containing the content and then centring the <main> within the <body>. There is a number of ways to do so:
```
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
```
or simply:
```
main {
    margin: 0 auto;
}
```
You just need to remember to set that max-width on the <main> element to make sure it doesn't spread the full width of the parent.
Your mobile menu switches to the desktop menu at viewport width 768px but the login and register buttons don't come into the viewport until around 1050px, meaning there is around 300px where these buttons are not visible on the screen. Just a bit of playing around with the layout should fix that.

Hope this helps 😁

Marked as helpful

Lamidi Morufat• 140

@Ehmkayel

Posted 7 months ago

Thank you for the feedback, I will work on that

Please log in to post a comment

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