[Resolved] How to change the width of footers

[Swadhin]

Hi there,

I was changing the width of Footer widgets (I want the first two to be 25% -25% and the last one to be 50% on desktop and 100% width of each element in tablet and mobile (meaning on tablet and mobile mode all widgets should be single column).

I saw this code on the page https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area but it confused me further plus I didn’t know how to implement that for 3 widgets.

Please help 🙂

Thank you,
-Swadhin

GP Premium 1.7.8

[Swadhin]

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

Thank you,
-Swadhin

[David]

Hi there,

try this CSS:

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

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

[Swadhin]

Hi David,

Thank you for your help.

Should I add this on the filter snippet?

Thanks

Thank you,
-Swadhin

[David]

No, just add it to your CSS.

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

[Swadhin]

Thanks David, it worked.

-Swadhin

Thank you,
-Swadhin

[David]

Glad to be of help

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

[Roger]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Roger]

Thanks, Tom. It works great!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts