[Resolved] How do I center 4 footer widgets?

Home Forums Support How do I center 4 footer widgets?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #515686
    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

    #515881
    Leo
    Staff
    Customer Support

    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;
    }
    #517853
    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

    #517879
    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

    #517917
    Leo
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.