[Resolved] Control the actual size of the footer box width and height

[David]

Hello, I have 4 footer widgets and cant seem to figure out how to set a maximum height or width to each of the boxes? Is there anyway to do this with WordPress Widgets? I have Elementor but prefer not to have to build the footer areas with that as the footer content will be the same on each page. Also is there a way to set padding of the interior of the boxes?

[Leo]

Hi there,

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

Height is controlled by the padding: https://docs.generatepress.com/article/footer-padding/

Let me know if this is what you are after 🙂

[David]

HI Leo thanks so much for the quick delivery! I’m Looking for internal padding inside the box to shift the content one way or the other. Not the padding between the footer boxes. Maybe i’m missing it but havent come across that yet?

[Leo]

Little confused. Looks like you are already using CSS for both?

.inside-footer-widgets {
    padding: 10px;
}

and

.footer-widget-1 {
    padding-left: 10px;
    padding-right: 0px;
    max-width: 500px;
    font-family: "Allura";
    text-align: left;
}

.footer-widget-2 {
    padding-left: 0px;
    padding-right: 25px;
    max-width: 500px;
	font-family: "Allura";
    text-align: left;
}

.footer-widget-3 {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 500px;
	font-family: "Allura";
    text-align: left;
}

.footer-widget-4 {
    padding-left: 5px;
    padding-right: 10px;
	max-width: 500px;
	font-family: "Allura";
    text-align: left;
}

What are you trying to achieve?

[David]

HI Leo. I copied and pasted that from some forums here but its not working the way i want which is simply padding inside the cell. I know a little about tables so to me its cell padding. I dont know anything about CSS code so I’m just trying to figure out some basics. I want to be able to shift the content in the box to the left or right. I’d like to be able to move the objects in the cell closer to the title but I dont know how to do that so I just eliminated the titles above each widget and ill have to use Elementor to add the tittle above each footer later.

[Tom]

You can adjust the space between the widget titles and content in Customize > Typography > Widgets. Try adjusting the Bottom Margin option.

As for the footer widget content padding, give this a shot:

.site-footer .footer-widgets-container .inner-padding {
    padding: 40px;
}

[David]

Hi Tom, thank you so much, the content distance to the title issue is solved.

Is there a way to apply this particular code you gave me on the inner padding to individual widgets?

.site-footer .footer-widgets-container .inner-padding {
padding: 40px;
}

Also, if you see widget footer 1 on my site, I’d like to move the navigation links up just a bit closer to the social icons. Is this possible?

One more thing. Is anyone else finding that Firefox browser is choking when using the GP customize? When I’m using the plugin I’m getting poor response time with the mouse cursor for instance. Its even happening in the dashboard of WP in a separate browser window. When I tried working on the site in Internet Explorer it works perfectly with no issues. Not sure whats up there.

Thanks again for your help on this Tom. Greatly appreciated,

[Leo]

To apply to specific widget, try this:

.site-footer .footer-widgets-container .footer-widget-1 .inner-padding {
    padding: 40px;
}

Try this CSS to move the menu up:

.footer-widget-1 .widget {
    margin-bottom: 0px;
}

Haven’t noticed any issue with Firefox. Do you have another computer to test?

[David]

This has been really helpful Leo/Tom! I’ve been able to do quite a bit with it. Is there a way though to move the content in the footer box up or down without having it affect the tittle as well? I cant seem to push the Contact form email box up a little to align it with the top of the Social Icons and Instagram thumbnails in widgets 1 and 3. Its not imperative but it would be neat if the was a snippet of code to do this!

I don’t have another computer to try the Firefox issue out but I’ll see if they know anything about it.

[Leo]

That’s a tougher one.

Try this:

.widget .wpcf7 {
    margin-top: -25px;
}

[David]

Brilliant! Worked perfectly! Thanks so much guys! One last question if I may. Do you know of a particular library of code snippets like these that would be handy for noobs like me? Thanks again!

[Leo]

We just use developer tool from browser 🙂

Right click on the element you are looking at to open developer tool then you will see all the styles, classes and IDs associate with it 🙂

[Author]

Posts