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
Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P

@AdamullaOsas

Posted

Your desktop view looks great! The use of CSS Grid is impressive. However, the mobile view could use some improvements. Right now, below 480px, the page isn't scrollable, making it difficult to access the navbar. You might want to add something like min-height: 100vh to the container, so the page remains scrollable if content overflows.

Also, ensure responsiveness across all devices, not just the ones specified in the task. For example, the layout becomes unreadable below 1000px, with part of the navigation cut off. Try to avoid using fixed widths like width: 1110px; instead, consider using margins, paddings, and gaps to create space. You could also use max-width: 1110px if necessary. This will make your page more adaptable to smaller screens.

Marked as helpful

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