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 using CSS grid, mobile first

potato58 30

@potato58

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


This was my first time creating a burger style menu. I am unsure of the method I used for greying out the page when the menu is visible - is there a way to grey out the entire page (i.e if the page is scrolled down) beyond the visible area?

Community feedback

@exitsimulation

Posted

I think your method is perfectly fine. Since it's a <div> that's positioned with absolute and scaled to the full page dimensions you won't need to worry about it scrolling past the visible area. I will always cover the full viewport. For the mobile version of this challenge I created a top bar that is sticky, so that users would have access to the burger menu from anywhere on the page. Maybe it's worth a consideration

Marked as helpful

1

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