Design comparison
Solution retrospective
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
- @jakegodsallPosted 9 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 helpful0 -
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