[Support request] how do you resize footer widget

[sdanbu]

Hi

I have 4 footer widgets

They each take up a column with equal width in the footer area.

I want the first one to be the widest.

Could you please help me know how do you resize the footer widgets?

[Leo]

hi there,

This should help: https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area

[Tommy]

Hi, I know this is an old post, but I’m having the same issue. I tried adding the code in the article using Code Snippets, but nothing has changed on my site. has something changed since this was posted?

[Fernando]

Hi Tommy,

If you’re using flexbox, and website created with newer versions of GeneratePress are, then you would need to add the custom CSS found in this link: https://docs.generatepress.com/article/footer-widgets/#:~:text=Choosing%20different%20widths%20for%20each%20widget%20area%20%E2%80%93%20Flexbox

Specifically, can you try adding this css:

.footer-widgets .footer-widget-1 {
    flex-basis: 56%;
}

.footer-widgets .footer-widget-2 {
    flex-basis: 22%;
}

.footer-widgets .footer-widget-3 {
    flex-basis: 22%;
}

Here is a link you may refer to with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Kindly let us know if this works! 🙂

[Tommy]

Yes, that seemed to work Fernando, although I changed the % and I thoight the 3 widgets should add up to 100. When I did that it didn’t allign properly so I adjusted things and it seems to be set ok with this:

.footer-widgets .footer-widget-1 {
flex-basis: 100%;
}

.footer-widgets .footer-widget-2 {
flex-basis: 30%;
}

.footer-widgets .footer-widget-3 {
flex-basis: 0%;
}

Is that normal?

[David]

Hi there,

with flex-basis they don’t have to add up to 100% but its better they do, as it can lead to elements overflowing their containment.

Fernandos CSS should work, the only reason it may not of had the desired effect is if the content of one of those widgets is commanding more space. If you can share a link to the site i can take a look.

[Tommy]

www.

While I’m asking, if you can see the Pinterest button is lower than the others. I’ve no idea why this is happening. And also, I’d prefer this widget to be a bit further right if you could recommend the best % settings for the css. Thanks.

[David]

For the social links – add this CSS:

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
    margin-bottom: 1.5em !important;
}

Regarding the footer widgets – i just tested Fernandos CSS and it worked as expected.
Do you have a specific layout your wanting to achieve ?

[Tommy]

Actually, it works. I was putting a label on the line above the css: eg. footer widgets

And when I deleted it, it corrected it how the % would expect.

Also, the social icons have straightened, too. Thanks a lot for your swift help. I’m new to Generatepress and not very technical, so I really appreciate the help.

Speaking of help. I’m having problems with the Core Web Vitals (the reason I switched to Generatepress) on mobile, and wonder if there’s anything I can do to get the speed up. Desktop is over 90% but mobile is under 50% on the same pages.

Thanks in advance.

[David]

Glad we can be of help.
If you want to raise a new topic regarding CWV – then we can take a look and provide some advice.

[Author]

Posts