How to set individual footer widget width

It's possible, but not super easy as of right now.

I want to make it easier in a near-future update, but it's not quite there yet.

What you can do is this:

Create a child theme - or use this one: http://generatepress.com/api/themes/generatepress_child.zip

Now, copy the footer.php file from the "generatepress" folder, and add it to your child theme folder (generatepress_child).

Now GP is using the file in your child theme's folder.

Now you'll see 5 different elements that start like this:

<div class="footer-widget-1 grid-parent grid-<?php echo $widget_width; ?>">

They will each be named "footer-widget-1", "footer-widget-2" and so on.

Now, doing this will make it so choosing the widget width in the Customizer doesn't work anymore, but that's ok as a future update will include this functionality, and you'll be able to delete the footer.php file from your child theme, and start using the new feature.

So the important part of each element is this: grid-<?php echo $widget_width; ?>

You want to replace <?php echo $widget_width; ?> with the width of that widget as a percentage.

So if we want "footer-widget-1" to be 25% wide, we would now have this:

<div class="footer-widget-1 grid-parent grid-25">

And if we want footer-widget-2 to be 40% wide, we do this:

<div class="footer-widget-1 grid-parent grid-40">

Not easy, but it's do-able!

Hope this is helpful :)

Thank you. This is very helpful. I do have a question regarding the values for the widths. Should they add up to 100, or some other number less than 100?

Yes, ideally they should add up to 100 :)

Glad it was helpful!

Hi Tom,

meanwhile, is there an easier solution for this issue? :)

Please let me know.

Thanks,
Pat

Hi Patrick,

This should help: https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area

Hi, Leo

Using this filters (or similar), any way to set separately the size of tablet and mobile grid witdh?

Thank you

Hi there,

there is a separate filter for tablets:

https://docs.generatepress.com/?s=generate_footer_widget_

Nice, David!
Thank you.

Glad we could be of help

Btw, David

I've tried make something similar to this (on tablet view):

add_filter( 'generate_footer_widget_1_tablet_width', function() {
    return '100';
} );
add_filter( 'generate_footer_widget_2_tablet_width', function() {
    return '33';
} );
add_filter( 'generate_footer_widget_3_tablet_width', function() {
    return '33';
} );
add_filter( 'generate_footer_widget_4_tablet_width', function() {
    return '33';
} );
add_filter( 'generate_footer_widget_5_tablet_width', function() {
    return '100';
} );

But the 2, 3 and 4 column dont stay in the same line. Do you know if this is possible?
Thanks

Hi there,

Any chance you can link us to your site? This isn't how the filter was meant to work, so we likely need to give you a bit of CSS to get it working right :)

Hi, Tom!

You can see my website link in this topic:
https://generatepress.com/forums/topic/header-mobile-search-close-button-centeres-header-on-tablet/

I tried some CSS options before coming here. But I didn't find a way.

Thank you

Give this a shot:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets {
        display: flex;
        flex-wrap: wrap;
    }

    .tablet-grid-33 {
        width: 33.333%;
    }
}