[Resolved] How to set individual footer widget width

[Roy Shimmyo]

Is it possible to change the widths of each individual footer widget? Our design team has proposed a design where the middle widget is approximately twice the width of the other two widgets. Is this possible?

[Tom]

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 🙂

[Roy Shimmyo]

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?

[Tom]

Yes, ideally they should add up to 100 🙂

Glad it was helpful!

[Patrick]

Hi Tom,

meanwhile, is there an easier solution for this issue? 🙂

Please let me know.

Thanks,
Pat

[Leo]

Hi Patrick,

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

[fabiosilva]

Hi, Leo

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

Thank you

[David]

Hi there,

there is a separate filter for tablets:

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

[fabiosilva]

Nice, David!
Thank you.

[David]

Glad we could be of help

[fabiosilva]

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

[Tom]

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 🙂

[fabiosilva]

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

[Tom]

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%;
    }
}

[Author]

Posts