How to change the width of footers

UPDATE:

I added this code and it gives me the result (if not exactly what I wanted) to go with:

It displays 2 widgets on one column on tablet and the third on 2nd column. It is possible to add one in each column for tablet too (like mobile)?

Also, kindly approve that the code I used is good to go.

Thanks

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

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

Hi there,

try this CSS:

@media (max-width: 769px) {
    .inside-footer-widgets div.tablet-grid-50 {
        width: 100%;
        float: none;
    }
}

Hi David,

Thank you for your help.

Should I add this on the filter snippet?

Thanks

No, just add it to your CSS.

Thanks David, it worked.

-Swadhin

Glad to be of help

Hi David,
I have a similar issue.
I have a three column footer area, each one filled with a different widget content.
In desktop mode it works fine. In tablet/landscape mode the third widget gets pushed downwards.
In tablet/portrait and mobile modus the three widgets show up vertically, keeping their original alignment.

What I would like to happen tablet/landscape modus is that the widgets (plus content) shrink so that they all remain on the same horizontal line.

In tablet/portrait mode and mobile I would like them to be in a centered vertical position.
How do I achieve that?

Thanks in advance.
Anrobe

GeneratePress Premium/Aspire
Elementor

Hi there,

Give this CSS a try:

@media (min-width:768px) and (max-width:1024px) {
    .footer-widgets .footer-widget-1,
    .footer-widgets .footer-widget-2,
    .footer-widgets .footer-widget-3 {
        clear: none !important;
        float: left;
        width: 33.3333%;
    }
}

@media (max-width: 767px) {
    .footer-widgets {
        text-align: center;
    }
}

Let me know if that helps or not :)

Thanks, Tom. It works great!

You're welcome :)