Intro section with dropdown, React

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Joel, this looks good! The mobile nav works, and the dropdowns also. I think you did well also in keeping the image and text containers at a good size and at optimal views.

  Some other comments:

  1. I notice that at mobile view before the breakpoint changes, the image becomes stretched out. You'll need to add an object-fit: contain, and that should fix it!

  2. For .hero at mobile view, you can try width: min(100%, 80rem) instead so that the text doesn't stretch out as much, and then at desktop view, you can either just use width: 100% or width: min(100%, 80rem) so that things don't stretch out too far here. If you use min(), be sure also to add margin-inline: auto.

  3. For the React side, I think you can try making a component for the links since they appear quite repetitive, and they can practically can be made into a component.

  That's about it, great work since it is not easy to make this look good!

  Marked as helpful

  3
• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hello Joel. Congrats on finishing the challenge.

  A few of suggestions in your styling would be to :

  • Remove the height on .hero-img selector so that image can be displayed in correctly through different viewports.

  • Add z-index greater than 0 on your .dropdown selector to elevate it obove main content:

  .dropdown {
       z-index: 1;
  }
  

  Marked as helpful

  1