[Support request] Footer Widget Width Size

[Sumit]

I’m using 3 Widget Footer Layout.

and it’s not looking Good.

Check here: https://blogginglift.com/blog/

I want the width of footer 1, footer 2 and footer 3 same as this website.

Check Here: https://masterblogging.com/blog/

Please send me CSS Code.

I’m Waiting…

[Leo]

Hi there,

So different widths for the footer widgets?
https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area

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

[Sumit]

I want footer 1 width: 50%
Footer 2 Width: 25%
Footer 3 Width: 25%

So, please edit the below code. So that I can just copy paste it in my site.

Because I don’t have any knowledge about PHP

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'25';
}

[Leo]

It’s quite straight forward if you have a closer look:

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 - 50% in this case
    return'50';
}
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'25';
}

You should be able to figure out 3 from the examples above 🙂

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

[Ryan]

I had an issue with resizing footer widgets tonight and wanted to share my solution for anybody else Googling.

GeneratePress 3.0 introduces Flexboxes. These are great, but one hiccup is the old way of resizing widgets, as described in the documentation, stops working.

It turns out, there’s a new method for Flexbox users described here! https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

Hopefully these new instructions get added to the footer widget documentation page soon, but here they are in the meantime!

 .footer-widgets .footer-widget-1 {
    flex-basis: 56%;
}

.footer-widgets .footer-widget-2 {
    flex-basis: 22%;
}

.footer-widgets .footer-widget-3 {
    flex-basis: 22%;
}

[Leo]

Thanks Ryan!

I just updated the doc page:
https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area-%E2%80%93-flexbox

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

[Sophia]

Hi,

I’ve got an similar issue to Sumit, but I would not only like to change the width of the widget but also how they break.
e. g. for desktop: widget 1 and 2 in row 1 and widget 3 and 4 in row 2.
Is there any possibility to do that?

I’m trying to rebuild this footer with generatepress.

Nice regards,
Sophia

[Fernando]

Hi Sophia,

Here is a custom CSS code you may try to replicate the site you linked:

.site-footer .footer-widgets .inside-footer-widgets > * {
    flex-basis: 50%;
    box-sizing: border-box;
    padding: 2em 1em;
}

.site-footer .footer-widgets .inside-footer-widgets {
    flex-wrap:wrap;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Hope this helps! Kindly let us know how it goes. 🙂

[Sophia]

Hi Fernando,

thanks a lot for this fast and perfect working solution! 🙂

[Fernando]

You’re welcome Sophia! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts