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

FEM's News Homepage - my take on it.

wannacode 680

@kwngptrl

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


Hi, this is my take on this challenge. Feedback is welcome. While the navbar is working, I'm not fully satisfied with it. It doesn't seem to be obeying grid rules in some cases, like there's quite a bit of padding when on fullscreen mode.

Community feedback

Tryt4n 940

@Tryt4n

Posted

It's because you gave min-height: 100vh; for your body. Change it for display of flex, flex direction of column and justify-content of center. Then delete margin-top from your footer and it would be done.

Nice trick for debugging CSS:

* { background: hsla(100, 50%,50%, .2); }

You can use something like this. It gives opaque background to everything on your page. So the backgrounds of the elements will overlap each other. Thanks to that you will be able to see where the problem is placed. Before you edit your solution just check it out. Also if you have some pseudo elements ::before or ::after also give them the background. *::before and *::after

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