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
MarkBoots8mo ago
don't really get what you mean, don't see padding
No description
clevermissfox
clevermissfox8mo ago
Is the image display; block.
Bardacoon
BardacoonOP8mo ago
I meant that when I start the animation, this happens, I dont get why there's that "padding"
No description
MarkBoots
MarkBoots8mo 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
MarkBoots8mo ago
No description
Bardacoon
BardacoonOP8mo 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
MarkBoots8mo ago
ah great. glad you could solve that

Did you find this page helpful?