[Resolved] Footer Widget custom width

[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

[Leo]

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 🙂

[stedica]

Hello:

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

https://edu.doitmarketing.net

[Leo]

That works as well 🙂

[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.

[David]

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.

[joanllompart]

Thank you David. It worked!

I am always happy with GeneratePress support! 🙂

[David]

Glad to be of help

[Author]

Posts