Intro section with dropdown navigation with HTML, CSS and JS

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 6 months ago

  Hi! The developed solution looks great and is very well implemented! A few suggestions to make it even better:

  1. Hover Behavior Issue:

  On desktop, when hovering over the Learn more button, there’s a slight layout shift. The paragraph above the button moves slightly upward, which disrupts the user experience.

  Initially, the button has no border, but on hover, a 2px border is applied, causing the layout shift.

  Current CSS:

  main .text button {
      border: none;
  }
  main .text button:hover {
      border: 2px solid hsl(0, 0%, 8%);
  }
  

  In order to fix it, add a transparent border initially and only change its color on hover.

  main .text button {
      border: 2px solid transparent;
  }
  main .text button:hover {
      border-color: hsl(0, 0%, 8%);
  }
  

  This way, the border width remains consistent, preventing any layout shifts.

  2. Responsiveness Improvements:

  1. Hero Image:
     Currently, the desktop hero image (image-hero-desktop) is being used across all resolutions. However, a separate image for mobile resolution is provided (image-hero-mobile). Using the appropriate image for mobile devices will enhance the viewing experience.

  2. Client Images Overflow:
     On mobile resolutions, the client images (inside the client div) overflow, taking up excessive space. Reducing their size for mobile will fix this issue and make the layout more compact.

  3. Navigation Drawer Behavior:
     When the navigation drawer appears upon clicking the menu icon, the page is still scrollable. This allows the navbar to scroll out of view, which isn’t the expected behavior.
     Fix: When the drawer is displayed, make the body non-scrollable using:

     body {
         overflow: hidden;
     }
     

     Once the drawer is closed, revert it back to auto:

     body {
         overflow: auto;
     }
     

  ---

  These small refinements will make the solution even more polished and user-friendly! Great work so far! Keep it up! 🚀

  10