How do I extend the white space and put the footer at the bottom of the page?

Confused? I have no idea how to ask this properly. If you go to this link on a computer with a sufficiently large display, you can see that the footer begins immediately after the content instead of being down at the bottom of the page as it should. How can I put things in place on shorter pages like this?

http://goodschooling.net/almost-there/

Hey Daniel,

You can apply a min-height property to your page content. Try the CSS snippet below changing the value to whatever is necessary for your layout.

.fl-page-content {
  min-height: 800px;
}

Let us know how it goes!

Ben

While that helps push the footer down, how it looks still depends on the specific display being used. What I want to do is force the footer to the bottom of the browser window on pages where the content does not fill up the window and require scrolling.

Here is a screenshot of the lower portion of my new Bitly dashboard. I only have two links created so far, so most of the page is white space, but no matter how I resize the screen, the footer is always at the bottom, where it should be. That’s what I want my footer to do all across my site. If someone wants to open a new Bitly account they can see what I mean. I can’t find an example apart from that right now. Most pages have more content. :slight_smile:

http://d.pr/i/1d40s/5R0j1JyY

It’s rare for me to have pages where this wold be an issue. Would there be any CSS I can put on only the relevant pages to force the footer to stay down there?

Hey Daniel,

You can try this CSS snippet instead. The second snippet is just in case you get a weird background color from the gap.

@media (min-width: 768px) {
  .fl-page-footer {
    position: absolute;
    width: 100%;
    bottom:0;
  }
  html {
    background: #FFF;
  }
}

Ben

Ooh! That seems close, but at least one problem: if the window is already too small to display the entire page, the footer gets stuck in the middle of the page when you scroll down.

Easier seen, though! Make your desktop window relatively short. Maybe 4-6 inches tall. In that same window, go to http://goodschooling.net/almost-there/. With the code as in, the footer is on the screen, even though you need to scroll to see all the content. Also, when you scroll down, the footer gets stuck in the position and doesn’t scroll with the rest of the page.

I’m guessing this is getting into some tricky code. But it may be something worth looking into. I’ve never run into this issue with any other themes.

EDIT: One more thing. On all of the other pages, the footer sticks, too, so I guess you don’t need to tweak your window size. Just go to another page on the site. :slight_smile:

I had to remove the code since it was messing up the whole site. Here is a screencast of the issue on the front page.

http://d.pr/v/126GY/4WHoBuF3

Let me know if I need to reapply it for you. Thanks!

Hey Daniel,

I’ve also used a few themes before as well but they never had that kind of feature which is why I have those CSS snippets above handy. A quick Google lead me to this so you can try that. You can also head over to our User Voice Forums and add that in as a Feature Request! The guys love to go there to check for new ideas to implement.

Ben

Thanks! I will check that out soon. Looks promising. If it seems to do the job, I 'll use it as part of my feature request. :slight_smile:

Thanks!

Dan

No worries! If it doesn’t work, there are a lot of other search results on Google as it seems this has been a feature often discussed. :slight_smile:

Ben