[Support request] How to format the footer widget alignment?

[Olga]

Hello,

My 3 footer widgets are all left aligned automatically. Surely centre should be the default, but how do I change it?
One of the widgets is a custom menu comprising of social icons.It is stacked instead of lined, how do I format it to sit in one horizontal line?

[Leo]

Hi there,

Try this CSS:

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

As for social icons, I would recommend using Tom’s Lightweight Social Icons plugin then you can insert them as widgets.
https://en-ca.wordpress.org/plugins/lightweight-social-icons/

Let me know if this helps.

[Olga]

Thanks Leo,

That helped. Apart from a stubborn html based tripadvisor widget that stayed on the left, perhaps I can add some code to add padding to an individual footer widget, I need about 100px?

[Leo]

Can you provide a link to your site? I should be able to find a way to make it center.

[Olga]

Thanks! I would really appreciate that. Its cobbletales.com. I temporaraly disabled the maintenance mode so you see it.

While you are at it, could you see how to also align the footer widgets vertically centre? now they seem at different heights.

Another theme based question is about a blogpost formatting. Could you see why both the feature image and the title with date have no left padding? and how do I change that?

Also, the feature image did not respond to customiser controls, like above title/below, hide/show or size…

Thanks!
O

[Leo]

– Try this CSS for the TripAdvisor widget:

div#CDSWIDFRR {
    margin: auto;
}

– For vertically align, try some CSS like this:

.footer-widget-3 {
    padding-top: 30px;
}

– The blog title and featured image has no padding because that’s using the GP container and the content is using Elementor container. Might be easier if you just build everything out of Elementor if that’s the route you want to go.

– The Featured Image options in the customizer controls the featured images in the main blog page, not single post. I think what you are looking for is in Layout > Page Header > Single Post Header Location.

[Howard]

Hi
Does the above code to get my text and tiny logo in my LEFT FOOTER WIDGET TO move to center footer GO INTO HOOKS?
.inside-footer-widgets {
text-align: center;
}
afte content, or before content?
thanks
Howard

[Leo]

That’s CSS so it should be added using one of these methods here: https://docs.generatepress.com/article/adding-css/

If you need more help on this, please open a new topic. Thanks!

[Author]

Posts