How to remove the white space under my footer in WordPress?

1 Views

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.

Read More

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/solution that will remove the white spaces below the footer on my website (preferably custom CSS method).

You can find an example of the white space on my website here. (try viewing on a browser resolution higher than 1280×800)

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.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You have whitespace under the footer because the content is not sufficient to push it past the bottom of the monitor at higher resolutions.

    I’d recommend using the Sticky Footer to handle this. It allows the minimum height of the body to be that of the browser, regardless of how little content is in the page.

    The sticky footer solution requires some specific HTML to be included, and some basic CSS. Here’s a Fiddle of Ryan Fiat‘s sticky footer in action using the code from his example.

    The code goes like this:

    HTML:

    <body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Footer content here</p>
    </div>
</body>

    CSS:

    * {
    margin: 0;
}
html, body {
    height: 100%;
    background-color:#eaeaea;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
    border:solid 1px red;
}
.footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
    border:solid 1px blue;
}

    Looking at your markup, you can use your existing div class="clear"></div> as your .push div, then you only need to add the div class="wrapper"> around your content.

  2. Try something like this

      
html {
   height: 100%;
}

body {
  height: 100%;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

footer {
  flex-shrink: 0; 
 }


.futovac {
  flex: 1;
 }
  
    <html>
<body>
<main></main>
<div class="futovac"></div>
<footer></footer>
</body>

</html>

    DEMO: https://help.podio.com/hc/en-us

  3. find you code on .footer you code will be like this,

.footer-top-content .widget_links ul li a {
  border-bottom: 1px #4C4C4C solid;
  background: #333;
  color:#999;

    replace this code with this one,

    .footer-top-content .widget_links ul li a {
  border-bottom: 1px #4C4C4C solid;
  background: #333;
  color:#999 !important;
  overflow: hidden;

    this helped mine. hope for you too guys..