[Support request] Centering the footer widgets

[chris]

Hello, I have a website where I am using the Peak template. URL is http://www.odonnellsw.com

In the footer are three footer widgets. When I view the site on a laptop, I noticed that widgets are not really centered, rather, Widget one is aligned with the left edge of the container. I would like all three of these widgets to be positioned in the center of the footer. Can you please tell me the best way to do this?

Thank you!
Chris

[Leo]

Hi there,

Try this CSS:

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

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

Let me know 🙂

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

[chris]

Thank you so much for the reply!

I added the CSS, but now the text itself is centered. I hope I can clarify this: What I want is the text in the widget itself to remain left aligned, but when you look at the page as a whole on a laptop or desktop for instance, the left most widget, where it says Arizona is aligned perfectly with the edge of the container above it. I think it should have more padding or air on the left, and all 3 widgets collectively should also be centered so there is not so much awkward space on the right of the widget 3. Right now, it just looks like all the widgets collectively are sort of pushed to the left. Maybe this is the way it’s supposed to be. I don’t know, I’m open to any suggestions about this.

[Leo]

Sorry I’m having a hard time picturing what you mean.

What if you change the inner container to contained:
https://docs.generatepress.com/article/footer-layout/#inner-footer-width

Then play around with padding?
https://docs.generatepress.com/article/footer-padding/

Let me know if this helps 🙂

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

[chris]

So appreciate the rapid response. Thank you! Hoping this screenshot will clarify further what I want to accomplish. http://completerealty.net/p7allegro/img/screenshot1

Thank you!

[chris]

I’m trying to center all three between the guides in this screenshot:

http://completerealty.net/p7allegro/img/screenshot1

Thank you!

[Leo]

Hmm if you want the footer widget 1 to align with the left side then I guess the only option here is to increase the inner padding of footer widget 2 and 3 with this CSS:

@media (min-width: 769px) {
    .site-footer .footer-widgets-container .footer-widget-2 .inner-padding {
        padding-left: 60px;
    }
    .site-footer .footer-widgets-container .footer-widget-3 .inner-padding {
        padding-left: 60px;
    }
}

You can fine tune the px number.

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

[Author]

Posts