Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Control the actual size of the footer box width and height

  • This topic has 11 replies, 3 voices, and was last updated 3 years ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #415024
    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?

    GP Premium 1.4.3
    #415134
    Leo
    Staff
    Customer Support

    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 🙂

    #415233
    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?

    #415285
    Leo
    Staff
    Customer Support

    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?

    #415302
    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.

    #415361
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #415715
    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,

    #415778
    Leo
    Staff
    Customer Support

    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?

    #416247
    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.

    #416336
    Leo
    Staff
    Customer Support

    That’s a tougher one.

    Try this:

    .widget .wpcf7 {
        margin-top: -25px;
    }
    #416602
    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!

    #416610
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.