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

Responsive Blogr

#accessibility
Busoalmiโ€ข 250

@oluwa-busssy-olami

Desktop design screenshot for the Blogr landing page coding challenge

This is a solution for...

  • 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?

Mmmโ€ฆ This is my first time working on a menu for the mobile screen. I've always avoided it, but I had to face it and give it a try, which turned out nice.

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

The major challenge I had was styling the nav bar for both mobile and desktop screens, but it was fun to work on. I had to watch several videos to understand it, although the drop-down in the design doesn't have a width of 100% like mine does. Additionally, the dropdown on both mobile and desktop screens was initially set to a position of fixed to take up the available screen space. I tried using static positioning, but it created it above the text container in the header, so I had to revert it back to fixed.

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

The functionality and responsiveness are key areas I'm struggling with, as well as positioning. I would really appreciate it if you could go through my code and provide comments on how I could improve for next time.

Community feedback

P
Koda๐Ÿ‘นโ€ข 1,930

@kodan96

Posted

hi there! ๐Ÿ‘‹๐Ÿ‘‹

There's no need to create a whole new section in HTML for your mobile and desktop headers. You can wrap the dropdown lists and the corresponding main list items into a nav tag (since we're using semantic HTML) and you're free to move them around with position: absolute;.

Also, since your eventListener() works with click it's not a good idea to give the dropdown menus position: fixed;, because users can scroll down after opening the dropdowns.

You can check my solution if you have questions, or feel free to ask me.

Hope this helps ๐Ÿ™

Good luck and happy coding!

1

Busoalmiโ€ข 250

@oluwa-busssy-olami

Posted

Thank you so much; Iโ€™d check it out@kodan96

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