3-column preview card component

Community feedback

• 

  Thomas Burette•190

  @tburettePosted 10 months ago

  Nice solution. You used place-content which I didn't know about. It is a shorthand property for align-content and justify-content.

  There is a smooth transition when the breakpoint is it : the vertical space between the items within each of the three cards smoothly increase/decrease. I looked at the code and it is caused by :

  .button {
    transition: all 0.4s;
  }
  

  At first I didn't understand why transition: on a button affect the space between the items of a grid. By fiddling around I realized it is the margin-top property of the button which transitions.

  There is a bunch of CSS that is unused in the final solution : in .button {} there are two border:. .orange{}, .green{}, .cyan{} are unused,..

  Marked as helpful

  0

  ---

  

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  Hi @tburette 👋

  Thank you for the time you took to review my solution! You must not have noticed that utility classes .orange {}, .green{}, and .cyan{} are used for adding the appropriate color to every button's text.

  Good catch on border: none and border: 1px ... 👍 I was doing a button reset at first and then forgot to remove it when styling 😅

  Thank you!

  0