[Resolved] Aligning logos at footer with custom background color

[ch1800]

Hi folks,

I need to have a series of logos at footer, all centrally aligned and with custom background color (other than the main site background color).

I have temporarily placed them inside 5 widgets but might get more than 5 in the future.

What would be the best solution for having more than 5 logos in a single line, all aligned in center with a custom white background (instead of the current blue)?

Should I use Elements or something else for doing so?

Thanks!

[Leo]

Hi there,

I would say hooks element with columns would be the way to go.

You can use similar HTML here to create columns:
https://docs.generatepress.com/article/split-header-three-sections/

And the before_footer hook should work:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know if this helps 🙂

[ch1800]

Thanks Leo but I’m a bit lost here.
Your first example is for headers – how to use it for the footer?

As for the second example “before_footer” I really don’t well understand how to use it.
I get the examples but which code to use and where exactly?

[David]

Hi there,

are you going to need the Footer Widgets for any other purpose ?
If not then you can add all your logos to the first widget and we can provide some CSS to make the first widget into a single row.

[ch1800]

Thanks David,
I also think that would be the best idea as I won’t need the footer widgets for anything else.
And if later they change their minds and want to add something else in there I’ll have the time to learn more about Elements as I never used them before and I’m a bit lost.

If possible, I would need all logos (6 in total) in a single row, centered both horizontally and vertically because they are of different sizes and heights.

Also, they asked to have the whole strip with the logos on a white background, while the remaining background of the pages keeps the same blue background.

The next thing I’m lost with is that they might want also to add a couple of logos at header, left side above the navigation but I’ll try my best to avoid this mess as you already provided some time ago the CSS for having the main logo at right side as it is currently. Will keep that for another ticket…

Many thanks!

[Leo]

Can you add all 6 logos under one footer widget (footer widget 1) first?

And it would be good to open another topic for the header logo.

Let me know 🙂

[ch1800]

Just added them, thanks!

[Leo]

Try this CSS:

.footer-widgets .footer-widget-1 {
    display: flex;
    align-items: center;
    background-color: #fff;
}

[ch1800]

Thanks Leo,

That seems to work nicely but I had to add titles for the first and last image (currently active online) and there is a problem with the last image title that displays lower than the first one.

Other than that, I struggle a bit making left & right padding to correspond to the page’s margins and also I see that the last image is slightly cut at its right side. That happens also if I remove its title.

Any clues?

[David]

Wow those titles made it a tough little puzzle lol – try this CSS instead:

.footer-widgets {
    padding: 0;
    margin-bottom: 60px;
}

.site-footer .footer-widgets-container .inside-footer-widgets {
    margin-left: 0;
}

.footer-widgets .footer-widget-1 {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 40px;
}

.site-footer .footer-widgets-container .inner-padding {
    padding: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

.footer-widgets .widget :last-child {
    margin-top: auto;
}

@media (max-width: 768px) {
    .site-footer .footer-widgets-container .inner-padding {
        flex: 1 100%;
    }
}

[ch1800]

Awesome!
You guys rock!

Thank you very much and sorry for the pain but those clients are a bit complicated…

[David]

Glad we could be of help

[Author]

Posts