Footer widgets align bottom without padding

  • TheOneTrueVlad
    March 26, 2026 at 2:31 am

    Hello
    Using 3 footer widgets where the content of each has a different height (content not CSS value).
    I am looking to have all the content aligning to the bottom of the block on the row.
    Then when when the widgets wrap, there is no gap between widgets.
    The centre widget text will wrap changing the height of the content before the widgets wrap, so using padding doesn’t work wihtout having multiple media queries mapped to every word wrap event.
    All the solutions I’ve seen break the widget alignment across the row or have padding to fake the alignment.

    Also while I’m here, what element to I put min-width for each widget to make the middle widget wider to reduce text wrap and make the wrap happen sooner? I assume there is another line I need to add somewhere like relative?

    Thanks

  • George
    March 26, 2026 at 4:50 am

    Hello,

    Could you show us a URL?

    Another suggestion is to create your footer as a GP block element using GenerateBlocks in a more visual way.

  • TheOneTrueVlad
    March 26, 2026 at 5:22 am

    Hi
    https://dev2026-2.conceptcables.com/

  • George
    March 26, 2026 at 5:34 am

    Hi,

    The footer widget area (.inside-footer-widgets) is a flex container, so you can align all widget content to the bottom of the row by applying align-items: flex-end above the mobile breakpoint:

    @media (min-width: 769px) {
    .inside-footer-widgets {
        align-items: flex-end;
    }
}

    That replaces the position: relative; top: 20px inline style on your .mail_phone paragraph in widget 3 — you can remove that once the above is in place.

    To close the gap between widgets when they wrap, remove the bottom margin on the widget columns:

    .footer-widget-1,
.footer-widget-2,
.footer-widget-3 {
    margin-bottom: 0;
}

    To make the middle widget wider (reducing text wrap and encouraging the outer widgets to wrap sooner), override its flex-grow:

    .footer-widget-2 {
    flex-grow: 2;
}

    Since all three widgets already have flex: 1 1 0, this gives widget 2 twice the share of available space. Adjust the value up or down to taste.

  • TheOneTrueVlad
    March 26, 2026 at 6:40 am

    That is a thing of beauty, thanks.

  • George
    March 26, 2026 at 7:09 am

    Glad to know, you are welcome!

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