[Resolved] How to change the width of footers

Home Forums Support [Resolved] How to change the width of footers

Home Forums Support How to change the width of footers

  • This topic has 10 replies, 4 voices, and was last updated 5 years ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #827936
    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 πŸ™‚

    #827949
    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';}
    #828240
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

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

    Hi David,

    Thank you for your help.

    Should I add this on the filter snippet?

    Thanks

    #828263
    David
    Staff
    Customer Support

    No, just add it to your CSS.

    #829005
    Swadhin

    Thanks David, it worked.

    -Swadhin

    #829206
    David
    Staff
    Customer Support

    Glad to be of help

    #834426
    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

    #834780
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #835161
    Roger

    Thanks, Tom. It works great!

    #835746
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.