How to reduce the white space left by hiding the footer bar

  • Resolved semperaye

    (@semperaye)


    7 years, 4 months ago

    Hello,

    Although rather unorthodox, I have achieved my desired effect for my footer widget areas and footer bar, but I’m having a css issue that I do not know how to correct.

    Since I hid the footer bar, I am wanting to move my footer widgets closer to where the footer bar site.info used to be. I guess that means adjusting the margins or padding of something? Some css help would be awesome, I’ve gotten this far by way of google.

    Here is what I’m trying to do:
    FYI: the dark black line at the bottom of the picture is my desktop task bar not the footer…since it’s hidden ??

    View post on imgur.com

    Thank you!

    • This topic was modified 7 years, 4 months ago by semperaye.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Leo

    (@leohsiang)

    Hi there,

    The spacing add-on in the premium version allows you to do this in the customizer.

    Or you can use this CSS to remove the bottom padding of footer widget:

    .footer-widgets {
    padding-bottom: ;
}
    Theme Author Tom

    (@edge22)

    I think Leo meant to put 0px in there:

    .footer-widgets {
    padding-bottom: 0px;
}
    Leo

    (@leohsiang)

    Yes I did. Thanks Tom!

    Thread Starter semperaye

    (@semperaye)

    Kool thanks. Any way I get get it lower, example -10px?

    Thread Starter semperaye

    (@semperaye)

    I’m looking to get it closer to the bottom of the screen, about 1/4″ from the bottom, but -#px’s doesn’t seem to work.

    Theme Author Tom

    (@edge22)

    If it’s the same site as before, the widget with the “Example” button is pushing everything up.

    If all of the widgets were the same height, they would all be as close to the bottom as the Example button.

    Thread Starter semperaye

    (@semperaye)

    FYI; Solution: setting the .button style with a -px bottom margin.

    Example:

    .button,
    .button:visited {
    display: inline-block;
    *display: inline;
    *zoom:1;
    padding: 10px 15px;
    font-size: 17px;
    margin-bottom: -15px;
    }

    Theme Author Tom

    (@edge22)

    Glad you found a solution ??

    Thread Starter semperaye

    (@semperaye)

    Yes, but unfortunately this effects all buttons and so it messed up the css elsewhere so I need to figure out how to adjust the margin-bottom for just that one button ??

    Thread Starter semperaye

    (@semperaye)

    Got it. Hope this helps some other noobs out there!

    .button,
    .menu-item-3404 {
    margin-bottom: -15px;
    }

    Theme Author Tom

    (@edge22)

    Thanks again for sharing ??

    If you want to make sure it only targets elements in the footer, you can do this:

    #footer-widgets .button,
#footer-widgets .menu-item-3404 {
    margin-bottom: -15px;
}
    Thread Starter semperaye

    (@semperaye)

    Thank you! I’m using your code instead because I decided to eliminate a plugin that was allowing me to use the button in a menu, but it wasn’t needed.

    #footer-widgets .button,
    #footer-widgets .buttongray {
    margin-bottom: -15px;
    }

    Theme Author Tom

    (@edge22)

    Awesome ??

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to reduce the white space left by hiding the footer bar’ is closed to new replies.