Archived topic
How to force images to stick to the bottom of the div footer
5 replies · Started by Jean-Pol on September 29, 2021
On my GeneratePress test site https://gp.alysse.info, I put two image widgets in the footer.
I can't get the images to stick at the bottom of the widget block, so that there is no white space between the image and the copyright section.
I have tried several css things with padding and margin without success.
I think it has to do with vertical-align ???, at least for the first frame. But the second?
Can you help me ?
Hi Jean-pol,
Try this CSS:
.inside-footer-widgets {
align-items: flex-end;
}
.inside-footer-widgets>div img {
vertical-align: bottom;
}
.footer-widget-2 {
align-self: flex-start;
}Let me know :)
Perfect, it works, but it seems very complex to me for such a simple thing. And why a difference in behavior between the first and the last image? But anyway, thank you very much Ying!
It's not as simple as you thought, there're several layers to get to the image actually.
And why a difference in behavior between the first and the last image
No they don't. They share this CSS:
.inside-footer-widgets>div img {
vertical-align: bottom;
}And below CSS is for the middle one, otherwise it will be aligned to the bottom as well, if you don't mind, you can remove it :)
.footer-widget-2 {
align-self: flex-start;
}Thanks Ying !
You are welcome :)
