Archived topic

Footer Widget custom width

7 replies · Started by stedica on January 27, 2021

Viewing posts 1–8 of 8

January 27, 2021 at 5:49 pm #1636283

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

January 27, 2021 at 5:51 pm #1636285

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 :)

January 28, 2021 at 4:55 am #1636772

Hello:

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

https://edu.doitmarketing.net

January 28, 2021 at 12:21 pm #1637433

That works as well :)

May 15, 2021 at 2:20 am #1781250

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.

May 15, 2021 at 5:29 am #1781435

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.

May 15, 2021 at 7:33 am #1781818

Thank you David. It worked!

I am always happy with GeneratePress support! :-)

May 16, 2021 at 3:39 am #1782502

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.