@tburette
Posted
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
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!
