Responsive Three Column Preview Card Component

Community feedback

• 

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  Hi! Congratulations on completing the challenge 🥳. It looks pretty cool!

  To answer your question, The reason why your div expands in size when you hover over the button, is: because of: border: 1px solid var(--light-gray);. This property adds an additional layout size to your button on hover. A quick fix for the same would be,

  .learn-more{
   border: 1px solid transparent;
  }
  .learn-more:hover{
  border: 1px solid var(--light-gray);
  }
  

  This will allow you to have a placeholder border, with no visibility, that will already have adjusted the parent div's size from the start itself. Thus it will lead you to not, having a resize on hover.

  Marked as helpful

  2

  ---

  

  Richard Tom•80

  @CryptoFallenPosted almost 2 years ago

  @Gaurav4604 Thank you so much for that, the issue was rectified and fixed. having a border matter and I forgot that. I appreciate your help.

  .learn-more { 
    /* border: none; */ removed
    border: 1px solid transparent;
  }
  

  0

  

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  @CryptoFallen no issues! glad I could help 😄

  1