1. Home
  2. Knowledge Base
  3. LiveEditor Customizations
  4. Fix footer to bottom of LiveEditor Page (for shorter pages)

Fix footer to bottom of LiveEditor Page (for shorter pages)

If you have a short page in the LiveEditor such as a landing page, you may find that on larger screens the footer is located across the middle of the page rather than at the bottom

This is because we do not specify the height of the content area (as this can scale to your content size)

If it\’s essential that you fix the footer to the bottom of your page, you can use the following CSS within LiveEditor > Page Settings > Other Scripts > Custom CSS:

/** START Code for Fixing footer to bottom of page **/

.container{min-height:100vh;}

#content_area+.footer {
position: absolute;
z-index: 999;
left: 0;
bottom: 0;
width: 100%;
}

/** END Code for Fixing footer to bottom of page **/

Important Notes

A few of our pages will seem unaffected when you add the above code. The reasoning behind this is that some of the pages do not have #content_area+.footer class. Hence, you would need to replace #content_area+.footer with .footer instead.

Your snippet should then look like this:

/** START Code for Fixing footer to bottom of page **/

.container{min-height:100vh;}

.footer {
position: absolute;
z-index: 999;
left: 0;
bottom: 0;
width: 100%;
}

/** END Code for Fixing footer to bottom of page **/

We provide this Custom CSS “as-is” meaning we cannot provide additional support for this code. Use it at your own risk

We strongly recommend testing this code on your page as it may not work with all page combinations and test your page on mobile devices after adding this as it may not be compatible with all devices.

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support