[Resolved] How to force images to stick to the bottom of the div footer

[Jean-Pol]

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 ?

[Ying]

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 🙂

[Jean-Pol]

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!

[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;
}

[Jean-Pol]

Thanks Ying !

[Ying]

You are welcome 🙂

[Author]

Posts