Skip to content
Submitted about 2 years ago

Snap Intro Section

lieneil•560
@NJVS
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

I've made the dropdown nav behave differently on desktop and mobile. On desktop, only one dropdown can be open at a time while on mobile it can be open simultaneously. But I think my JS can still be improved. Check it out and feel free to comment any feedbacks, Thanks.

Community feedback

  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    Great work, Lieneil, I like the changing theme colors, and like you, I did the same thing where in desktop view I had only one dropdown open at a time while the mobile view can have both. The JS looks fine to me, and I finally learned how window.matchMedia can be used, so thank you!

    The only thing I saw that I would fix is the hero image, as it's a bit distorted when the window is resized. Try adding an object-fit:contain or object-fit:cover and see if that helps.

    Marked as helpful
    1
    lieneil•560
    @NJVSPosted about 2 years ago

    @elaineleung Oh I forgot about that, I usually check for responsiveness by selecting preset resolution. Thank you for pointing that out.

    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