Site logo

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

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

Home Forums Support How to force images to stick to the bottom of the div footer

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1947354
    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 ?

    #1947385
    Ying
    Staff
    Customer Support

    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 🙂

    #1947396
    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!

    #1947400
    Ying
    Staff
    Customer Support

    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;
    }
    #1947401
    Jean-Pol

    Thanks Ying !

    #1947402
    Ying
    Staff
    Customer Support

    You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.