Intro section with dropdown navigation

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 6 months ago

  Hi @CHEGEBB!

  The developed solution looks great! Just a minor suggestion for improvement:

  ---

  Prevent Layout Shift on "Learn More" Button Hover

  When hovering over the "Learn More" button, a border of 1px is added. This slightly shifts the surrounding elements (client images, hero image). Such layout shifts are not ideal for a smooth user experience.

  Cause:

  Initially, there is no border on the button.
  On hover, a 1px solid border is added, which pushes elements slightly.

  Fix (CSS Solution):

  .learnmore button {
    border: 1px solid transparent; /* Border is always there but invisible */
  }
  
  .learnmore button:hover {
    border-color: hsl(0, 0%, 8%); /* Only color changes on hover */
  }
  

  Now, the border is always present, preventing layout shift!

  ---

  Everything else looks fantastic! Keep up the great work! 🚀

  01

  Marked as helpful