Skip to content
Submitted 11 months ago

News home page, JS used to hamburger menu

Blazej-oWo•50
@Blazej-oWo
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

I had few problems, and i didn't solve all, one of them is that after using mobile menu, i can't change margin between names of the <li>, space beetwen them is to big. Second problem is that mobile view works on firefox on google chrome is not. Cheers and have good day, if you reading this.

Community feedback

  • Roksolana•910
    @RoksolanaVeresPosted 11 months ago

    Hi, @Blazej-oWo ! I've tried to fix your problem with large spaces between the items in the dropdown menu and suggest the following changes:

    First, in your @media (max-width: 375px) .nav-menu add justify-content: flex-start

    Then you'll need to apply some padding-top, for example 150px and gap:20px

    And that's how your .nav-menu styles look like on small screen:

    @media (max-width: 375px)
.nav-menu {
    padding-top: 150px;
    justify-content: flex-start;
    position: fixed;
    top: 40px;
    gap: 20px;
    flex-direction: column;
    background-color: #FFF;
    width: 90%;
    transition: .3s;
}

    As for your other issue, I'm not sure I understood you properly, but I've checked your solution on both browsers and the mobile version works perfectly well on both Google Chrome and Firefox 🙂

    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