Archived topic
Footer widget area not centered
9 replies · Started by Gianluca on July 8, 2020
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.
Hi there,
Like this?
.inside-footer-widgets {
text-align: center;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
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?
Not sure if I understand.
The widgets are centered by default.
Do you only want to center the widget titles?
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
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.
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
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?
Ok, no problem.
I use this code
.inside-footer-widgets {
text-align: center;
}to partially solve the issue.
Thank you
No problem :)
