3 Column Preview Card with Flex

Community feedback

• 

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  Have you tried applying ":active" pseudo class on your buttons? Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

  Marked as helpful

  3

  ---

  

  Farhan Hasan•50

  @hasanfarhan33Posted over 3 years ago

  @anmolkapil Thanks for you advice. I did, but it was affecting the things above the button, I gave a solid border of 1 px. However, while the button was active, everything shifted one pixel above.

  0

  

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  @hasanfarhan33 that's because. When the button is in active state. 1px border is getting applied to it in every corner. so total 2px adds in your height. You can just keep 1px transparent border as default. So that it already makes space for your border to be applied in active state.

  2

  

  Farhan Hasan•50

  @hasanfarhan33Posted over 3 years ago

  @anmolkapil Thanks a lot. I can't believe I didn't think of that. That is a clever solution. Appreciate it.

  1

  

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  @hasanfarhan33 Happy to help! ❤️

  1

  

  Farhan Hasan•50

  @hasanfarhan33Posted over 3 years ago

  @anmolkapil I think I am doing something wrong. It did work but now I don't know how should I change the color of the text inside the buttons. And the active method gives a border to everything, not just the buttons, it gives a border around the text, icons and everything.

  0

  

  Anmol Kapil•655

  @anmolkapilPosted over 3 years ago

  @hasanfarhan33 You should use :active class with button.

  Like this => button:active { CSS here } or if you have custom class. => .className:active You just have to write the CSS selector before the active pseudo class.

  1
• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted over 3 years ago

  Nice Solution from @Anmol Kapil There is another solution available you’ll have to make sure that the hoverable item has position:absolute;.

  Items with absolute positioning won’t have any effect on other elements on the page, so their size/position won’t disrupt other items.

  But, in order to make that work, the parent of the hoverable items has to have position:relative; so you can position properly.

  Marked as helpful

  2

  ---

  

  Farhan Hasan•50

  @hasanfarhan33Posted over 3 years ago

  @muhammadshajjar Thank you so much. I will try this tomorrow and keep you updated. I am just not very good with :active. It seems to affect all the children in the div, not just the button.

  0

  

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted over 3 years ago

  @hasanfarhan33 The solution which I gave you and @Anmol Kapil also l, apply it. It will definitely solve your Problem. I you face furthermore then do let me know.. Happy Coding:)

  0