Skip to content
Submitted over 2 years ago

Responsive Intro Section using flexbox and javascript.

Marit•400
@Maritxx
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

Hi! This is my solution for the introduction section with dropdown.

My main question regarding this was regarding the image scaling. I've set the image as a background-image on a div. On mobile, this means it won't show up (because the div has no height due to there being no content in it). I've been setting a padding-top on the div to make sure it shows up, but would love to know if this is the correct way to handle it.

Any general feedback is also greatly appreciated! ^^

Community feedback

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

    Hi Marit, regarding the hero section, you can try using responsive images instead. I also recently completed this challenge, and this is what I used for the hero section:

    <div className="hero">
  <picture>
    <source media="(min-width: 960px)" srcset="image-hero-desktop.png" />
    <img src="image-hero-mobile.png" alt="A man typing into a laptop" />
  </picture>
</div>

    Also, I like the opening animation for the mobile menu; one suggestion I have is that instead of animation display:none (which generally is considered not a good idea), which makes your content all squished to the side when you close it, try to use translateX instead to give it that sliding effect.

    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