[Resolved] Footer widget area not centered

[Gian]

Dear GP Team,

I’ve added to my site 4 widget areas in the footer, above the footer bar, but I have issues in aligning the 4 widgets at the center of the page.

Is there a way to align the 4 widgets in a way that they are centered, both from desktop and mobile?

Thank you in advance.

[Leo]

Hi there,

Like this?

.inside-footer-widgets {
    text-align: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Gian]

Yes, something like that, thank you!

But I’d like to center in the middle of the page only the 4 widgets, while keeping the text inside each widget left aligned, is it possible?

[Leo]

Not sure if I understand.

The widgets are centered by default.

Do you only want to center the widget titles?

[Gian]

Hi Leo,

Without the code you provided the widgets are not centered within the page, see here for desktop https://imgur.com/Sw7B4PH or here for mobile https://imgur.com/qZTGzoy

With your code they are centered but I’d like to keep the text inside the widgets left aligned.

Hope it’s clear now, thank you in advance.

Gianluca

[Leo]

The entire footer widgets container is centered in the page by default – I’m sure 😉
https://www.screencast.com/t/thGoGVlhWm18

Each widget is left-aligned in the container by default:
https://www.screencast.com/t/1YfruM2I8AcS

The CSS I provided centered all of them.

It’s not possible to have centered aligned and left-aligned at the same time.

Maybe this is what you are after instead?

.footer-widgets .widget-title {
    text-align: center;
}

Let me know if this explains it.

[Gian]

You said that

The entire footer widgets container is centered in the page by default

but not on mobile as you can see here https://imgur.com/a/bqeqQFL

And from desktop, margin on the right side are larger than on the left side https://imgur.com/a/ajQZQ3y

[Leo]

but not on mobile as you can see here https://imgur.com/a/bqeqQFL

That is correct. The container is always centered but the widget itself is left-aligned by default – like all other elements (page content, page titles) on the page.

You also have uneven footer widget padding set in the customizer:
https://www.screencast.com/t/uyIXTntXVWMy

Maybe that’s the issue you are referring to?

[Gian]

Ok, no problem.

I use this code

.inside-footer-widgets {
    text-align: center;
}

to partially solve the issue.

Thank you

[Leo]

No problem 🙂

[Author]

Posts