[Resolved] Footer Widget custom width

Home Forums Support [Resolved] Footer Widget custom width

Home Forums Support Footer Widget custom width

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1636283
    stedica

    Hello:

    On my site https://edu.doitmarketing.net I want to have only 3 widgets in the footer. Different Sizes
    Widget 1 25% – Widget 2 25% – Widget 3 50%

    On tablet they should collapse to
    Widget 1 – Widget 2
    Widget 3

    On mobile
    Widget 1
    Widget 2
    Widget 3

    Any ideas how to style this with css?

    Thanks

    #1636285
    Leo
    Staff
    Customer Support

    Hi there,

    Are you using the Flexbox structure of the theme (check in Customizer > General)?

    If so try this CSS for desktop:
    https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area-%E2%80%93-flexbox

    Then link me to the page in question and I can provide the rest of the CSS.

    Let me know πŸ™‚

    #1636772
    stedica

    Hello:

    Thanks. I did solve this using Generate Blocks, creating a custom footer.

    https://edu.doitmarketing.net

    #1637433
    Leo
    Staff
    Customer Support

    That works as well πŸ™‚

    #1781250
    joanllompart

    Hello,

    I have the same problem. I am making a footer with 5 widget areas and I am using flexbox:

    For desktop I want all widgets in a row:

    WIDGET 1 – WIDGET 2 – WIDGET 3 – WIDGET 4 – WIDGET 5

    I’ve used this CSS for desktop to customize width:

    @media (min-width: 1025px) {
    .footer-widgets .footer-widget-1 {
        flex-basis: 25%;
    }
    
    .footer-widgets .footer-widget-2 {
        flex-basis: 25%;
    }
    
    .footer-widgets .footer-widget-3 {
        flex-basis: 20%;
    }
    
    .footer-widgets .footer-widget-4 {
        flex-basis: 20%;
    }
    
    .footer-widgets .footer-widget-5 {
        flex-basis: 10%;
    }
    }
    

    For mobile, I see by default it uses this structure:
    WIDGET 1
    WIDGET 2
    WIDGET 3
    WIDGET 4
    WIDGET 5

    I’ve added this CSS for mobile:

    @media (max-width: 768px) {
    
    	.footer-widgets .footer-widget-1, .footer-widgets .footer-widget-2, .footer-widgets .footer-widget-3, 
    .footer-widgets .footer-widget-4, .footer-widgets .footer-widget-5  {
    		text-align: center;
    	}
    

    The problem arrives in tablet. I’d like to modify structure like this:

    WIDGET 1 – WIDGET 2
    WIDGET 3 – WIDGET 4
    WIDGET 5

    I amb trying this CSS:

    @media (max-width: 1024px) and (min-width: 769px) {
    
    	.footer-widgets .footer-widget-1, .footer-widgets .footer-widget-2, .footer-widgets .footer-widget-3, 
    .footer-widgets .footer-widget-4, .footer-widgets .footer-widget-5 {
            flex-basis: 50%;
        }
    }
    

    But it doesn’t work.

    Thanks for your help.

    #1781435
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 1025px) {
        .footer-widgets .footer-widget-1,
        .footer-widgets .footer-widget-2 {
            flex-basis: 25%;
        }
        .footer-widgets .footer-widget-3,
        .footer-widgets .footer-widget-4 {
            flex-basis: 20%;
        }
        .footer-widgets .footer-widget-5 {
            flex-basis: 10%;
        }
    }
    
    @media(max-width: 1024px) and (min-width: 769px) {
        .inside-footer-widgets {
            flex-wrap: wrap;
        }
        .site-footer .inside-footer-widgets>div {
            flex-basis: 50%;
            margin-bottom: 40px;
        }
    }
    
    @media(max-width: 768px) {
        #footer-widgets {
            text-align: center;
        }
    }

    For the tablet sizes the missing ingredient is the flex-wrap property on the widget container.

    #1781818
    joanllompart

    Thank you David. It worked!

    I am always happy with GeneratePress support! πŸ™‚

    #1782502
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.