intro-section-with-dropdown-navigation-main

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Biswadeb, good job on this challenge, which can be quite challenging since there are a number of different things, such as a dropdown nav and an overlay with mobile nav. Here are some comments that may help you:

  • You may have a missing closing tag because from my inspector view, it looks like everything is in your header right now, so be sure to check what's going on, since you probably don't want everything in the header!

  • Change the <div class="main"> to <main class="main"> instead, and that should take care of one accessibility issue, provided you fix the one above as well

  • It looks like the image in the desktop version is squished and not in its proper proportions. I would add an object-fit: cover to prevent image distortion, and I'd change the height and width both to 100%. Then in the parent container (I think it's called item2?) I would either add the height there if I need to, or better yet, a min-height. It's likely that you don't need to add a height, so do check the size in the design again.

  • I see that you're using different containers to display your desktop and mobile image; instead of needing to use display:none to toggle between different image sizes, try using a picture element:

  <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>
  

  • For the mobile menu, it should be stretching across the viewport height. You can have a look at my CodePen and see how to do that.

  • Also, the font faces for this challenge isn't showing up, and I notice you're using Times New Roman instead. Try and see whether you can select the font faces you need from Google Fonts and paste the link into your project.

  Hope this helps!

  0