Skip to content
Submitted over 2 years ago

Javascript Grid Float

Martin•240
@TheMrBombastic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Feedback is welcome :)

Things that came up while doing it:

-I could not set margin-top on my grid container (its is the one holding the whole content of the page) Does anybody know why that is? Maybe because the header container has no size? And is that because it's elemnts are floated?

-Is there a better and more up to date way to align the navigation items than float? Maybe two containers for left and right, using inline-block on its elemnt and use the flexbox to align the items?

-I got a small css section for general layout instuctions, than a big one for the mobile layout and a big one for the desktop layout. Is the normal way to go? How would you do it?

Thanks in advance :) Greetings.

Community feedback

  • Naleeka•470
    @NaleekaPosted over 2 years ago
    • try usingpadding-top instead of margin-top on your grid container
    • You could use flex in the header (to align the items in the header)
    ul.navigation-class {
display:flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
ul.navigation-class li {
padding-inline: 1rem;
}
    1

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