[Resolved] Fix Footer Padding?

This topic contains 6 replies, has 2 voices, and was last updated by  Andrew Misplon 1 month, 3 weeks ago.

  • Author
    Posts
  • #7878

    Bradman117
    Participant

    I have been inspecting and I cant find out how to fix the footer on my website. With the Custom CSS on customization.
    Here is a couple pictures:
    #1 https://app.box.com/s/v7cwm19aq3nhq0h1nvawlf1wjn2sya7t
    #2 https://app.box.com/s/r4dwd3dix6hubdchllo4vmv7kdj34wm1
    #3 https://app.box.com/s/xk9wd683gwrt22rx5wz00t6svrbnu4il

    I’m trying to make it so that the footer is small and thin on the bottom on all the pages like this one

    #4 https://app.box.com/s/9kj2sf6d4l2mqjprm3d3dgg95ip1edzs

    Thanks!
    – Bradman117

    #7879

    Andrew Misplon
    Keymaster

    Thanks for posting Brad.

    The footer doesn’t have a lot of padding, the background colour of the site matches the footer background. The footer isn’t sticky. There are two ways to change this behaviour. You can either set a min height for the content container thereby pushing the footer down or you can change the body background colour so it no longer matches the footer background colour.

    Insert at Customize > Additional CSS or your own Custom CSS plugin or child theme style.css file.

    Option one, adjust as required:

    .site-content {
        min-height: 800px;
    }

    Option two:

    body {
        background: #fff;
    }
    #7882

    Bradman117
    Participant

    Thanks so much it worked!!!
    -bradman117

    #7883

    Bradman117
    Participant

    This isn’t too big of a problem, but when I did either one if those codes it made it so i can scroll down more, is it possible to make it fix on the same screen if there is enough space?
    like this, for example, I am scrolled down even when I shouldn’t have to.

    https://app.box.com/s/82nk3459rsykceulhdphd1y3b17un424

    • This reply was modified 1 month, 3 weeks ago by  Bradman117.
    #7885

    Andrew Misplon
    Keymaster

    Hi. This is the option to use:

    body {
        background: #fff;
    }

    And not min-height if you want to avoid any unnecessary scrolling. If the content is a lot smaller than the screen size though then there will be some scrolling.

    #7886

    Bradman117
    Participant

    Got it thanks!

    #7887

    Andrew Misplon
    Keymaster

    For sure 🙂

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

You must be logged in to reply to this topic.

Scroll to top