[Resolved] How do I center 4 footer widgets?

[Charles]

Hi Tom,

I have setup 4 footer widgets with your functions code (.footer-widget-1 etc.), but they are all aligned left, and there is no option for margin in the customizer so they are right up against each other. I’ve tried to center them with .footer-widgets-container and .inside-footer-widgets or both but none of these have any affect. I could add margins to each one in CSS but I can’t find a selector for all footer widgets which would be more efficient.

Thanks
Charles

[Leo]

Hi there,

Not sure why you needed functions to implement 4 footer widgets?

The option should be in the customizer: https://docs.generatepress.com/article/footer-widgets/

To center everything in footer widgets, try this CSS:

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

[Charles]

Sorry, I did use the customizer. I initially saw the post about the function code and tried that, and then I noticed it was in the customizer, so I removed it from functions and set the customizer to 4.

But I can’t get the center to work. I’ve tried your code and here is a screenshot of what I get. I colour-coded the background so I can see what is happening. I set the width of .inside-footer-widgets to 90% just so I can see if it centers, but it doesn’t either. Here’s the CSS:

.footer-widgets-container{
    text-align: center;
      background:red;
}
.inside-footer-widgets {
    text-align: center;
     width:90%;
    background:green;
}
.footer-widget-1 {
     background:#d3d3d3;   
}
.footer-widget-2 {
     background:#c3c3c3;   
}
.footer-widget-3 {
     background:#b3b3b3;   
}
.footer-widget-4 {
     background:#a3a3a3;   
}

Charles

[Charles]

UPDATE. I just noticed I still had this in the functions file – that was causing the problem.

/* Footer */

add_filter('generate_footer_widget_1_width','tu_custom_footer_1_width');
function tu_custom_footer_1_width(){
    // Return the percentage of this widget width - 25% in this case
    return'20';
}
add_filter('generate_footer_widget_2_width','tu_custom_footer_2_width');
function tu_custom_footer_2_width(){
    // Return the percentage of this widget width - 25% in this case
    return'20';
}
add_filter('generate_footer_widget_3_width','tu_custom_footer_3_width');
function tu_custom_footer_3_width(){
    // Return the percentage of this widget width - 25% in this case
    return'20';
}
add_filter('generate_footer_widget_4_width','tu_custom_footer_4_width');
function tu_custom_footer_4_width(){
    // Return the percentage of this widget width - 25% in this case
    return'20';
}

If I delete this the widgets center. My mistake.

Charles

[Leo]

Glad you figured out!

[Author]

Posts