Skip to content
Submitted almost 2 years ago

FEM's News Homepage - my take on it.

wannacode•720
@kwngptrl
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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•960
    @Tryt4nPosted almost 2 years ago

    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

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