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

News homepage

retr0web 250

@retr0web

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've encountered a bit of a bug with this one. I'm not a big fan of creating separate menus for desktop and mobile, so usually css for the menu changes, not html. But with animations this approach backfired, because when you resize window on desktop or tablet, when the menu becomes mobile, user can see it for a second. Hot fix for it was to remove transition, but I need it to stay for smooth and consistent experience. But when mobile menu was activated, the issue remains. I'll investigate it further on how to remove this bug, but any feedback on how to cope with this issue without changing html is welcome.

(On GitHub repo's I listed the code that is used for this hack)

PS: in order to see this bug, resize the window so you you can see burger menu icon, click it, close menu, and then resize back to desktop size, and back to mobile, you'll see menu for a split second being translated to the right outside of viewport.

Community feedback

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