1. Knowledge Base
  2. Multiple Themes
  3. Footer Always at Bottom

If you do not have much content on your page your footer will appear like it’s floating up the page because a footer comes at the end of the content. Just because it is a footer that doesn’t make it find the bottom of your screen automatically.

You can use the following CSS to push your footer to the bottom of the page. Just note that you will need to adjust the padding to match that of your site’s footer height. If your site has a footer height that is 100px then the padding-bottom should be 100px.

Also, note that this css is designed for desktop screens and won’t affect tablets or mobile.

You can paste the CSS into your Custom CSS box in Theme Options. Keep in mind that you may need to adjust the padding.

@media (min-width: 992px) {
  html, body {
    height: 100%;
  }
  html body.wide #wrapper.container {
    min-height: 100%;
    position: relative;
    padding-bottom: 100px !important;
  } 
  #containerfooter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

Was this article helpful?

Related Articles