Footer Widget custom width

This topic has 7 replies, 4 voices, and was last updated 4 years, 5 months ago by David.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 27, 2021 at 5:49 pm #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

January 27, 2021 at 5:51 pm #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 🙂

January 28, 2021 at 4:55 am #1636772

stedica

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

Leo
Staff
Customer Support

That works as well 🙂

May 15, 2021 at 2:20 am #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.
May 15, 2021 at 5:29 am #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.
May 15, 2021 at 7:33 am #1781818

joanllompart

Thank you David. It worked!

I am always happy with GeneratePress support! 🙂

May 16, 2021 at 3:39 am #1782502

David
Staff
Customer Support

Glad to be of help
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] Footer Widget custom width

Popular Articles

[Resolved] Footer Widget custom width

Popular Articles

Start building better websites today.