Why is there a margin/padding?

Why when you run the animation by clicking on the checkbox, it scrolls the text creating some padding/margin on the bottom of the card?https://codepen.io/Bard-the-scripter/pen/vYwjKKo?editors=1100
7 Replies
MarkBoots
MarkBoots6mo ago
don't really get what you mean, don't see padding
No description
clevermissfox
clevermissfox6mo ago
Is the image display; block.
Bardacoon
BardacoonOP6mo ago
I meant that when I start the animation, this happens, I dont get why there's that "padding"
No description
MarkBoots
MarkBoots6mo ago
i see the grid-template-rows of .overlay-content is transitioning while the content .overlay needs to stay at the end Don't know if you could do something about that. the browser has to do some calculations to keep the content of .overlay at align-content: end;
MarkBoots
MarkBoots6mo ago
No description
Bardacoon
BardacoonOP6mo ago
Yeah you're right, align-content: end was the problem, i dont know why tho. I just changed overlay into using flex and I added margin-top auto to the title, and it works fine
MarkBoots
MarkBoots6mo ago
ah great. glad you could solve that
Want results from more Discord servers?
Add your server