WordPress.org

Forums

How to remove the white space under my footer in WordPress? (7 posts)

  1. lawpress
    Member
    Posted 10 months ago #

    I have basic coding experience. In my WordPress install, some of my pages have a blank white space under the footer that I would like to remove. I have tried several solutions but to no avail. The problem is persistent on chrome, Firefox, IE etc.

    I'm not really sure of the cause, but the size of the white space changes depending on computer/browser/resolution.

    As I am working in WordPress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS.

    I would like a footer that sticks to the bottom of the browser window with no whitespace below it.

    Q. Please provide me with code/a solution that will remove this white space below the footer.

    You can find an example of the white space on my [website here][1].

    [1]: http://goo.gl/7JS1Di

    Solutions i've tried:

    1. #footer {overflow: hidden;} didn't work

    2. Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my css but that didn't work

    3. #copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.

  2. CrouchingBruin
    Member
    Posted 10 months ago #

    Your footer has padding of 50px on the top & bottom. You can add this rule to adjust the padding on the bottom:

    #footer {
       padding-bottom: 0;
    }

    This remove all of the padding on the bottom. You can adjust the value (e.g., 10px), if you feel like you need some padding.

    You can also get rid of the space taken up by #copyright since there's no content in it:

    #copyright {
       display: none;
    }
  3. lawpress
    Member
    Posted 10 months ago #

    Copyright section is gone but the whitespace still remains.

  4. chris1design
    Member
    Posted 10 months ago #

    Hey Lawpress,

    Or if you want your footer text to stand out, you may want to try this:

    #text-2 .textwidget p a {
    color:white;
    }

    Hope that helps! Chris

  5. lawpress
    Member
    Posted 10 months ago #

    I dont want the footer text to stand out. I want a sticky footer.

  6. lawpress
    Member
    Posted 10 months ago #

  7. CrouchingBruin
    Member
    Posted 10 months ago #

    Sorry, I missed the part about wanting a sticky footer. However, you'll also want to reduce the padding so there's more room to display your main content.

    Add this to your custom CSS:

    #footer {
       position: fixed;
       bottom: 0;
       padding: 0 10px;
    }

Reply

You must log in to post.

About this Topic