[Resolved] Inline Footer Widgets

[Christian]

Hello, Team!

I used the following code to inline my footer widgets: https://generatepress.com/forums/topic/how-to-make-footer-menu-horizontal/#post-265949

But it seems to only be working with my Footer Widget 3. Footer Widget 1 and 2 remain stacked.

No changes happen even when using only one footer widget (basically eliminating Footer Widget 2 and 3). 🙂

[David]

Hi,

That CSS only applies to Navigation Menu widgets, which is why it doesn’t effect your social icons. It also only works if there is enough room for the items to be placed inline – which is why footer widget 2 doesn’t work.

You need to fix the social icons first.
First you need to remove the Title from the first icon.
Then Add a new HTML Widget to Footer Widtget one. Give it the ‘Follow’ Title. And add a HTML Comment inside its content eg. <!-- Follow -->

Let me know once thats done and ill take a look at the CSS required to align them all if possible

[Christian]

Oh, I see. Got it, thanks for the explanation, David! I just made the changes you asked for.

[David]

try this CSS:

/* Add flex and remove width so widgets auto resize */
.footer-widgets .inside-footer-widgets {
    display: flex;
    flex-wrap: wrap;
}
.footer-widgets .inside-footer-widgets .grid-33 {
    width: unset;
    margin-bottom: 20px;
}

/* Set all widget elements inline */
.footer-widgets .widget_nav_menu li,
.footer-widget-1 .widget_media_image {
    display: inline-block;
    margin-right: 10px;
}
/* Reduce space between social icons */
.site-footer .footer-widgets-container .footer-widget-1 .widget_media_image:not(:nth-child(2)) {
    padding-left: 10px;
}

[Christian]

David, did you go to Hogwarts? Because you must be a wizard!

That worked, thank you so much 🙂

[David]

Haha 🙂
Glad to be of help

[Author]

Posts