Join

Force Custom Elementor Footer to Bottom of Page

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Instructions

  1. Create a new CSS code snippet.
  2. Copy the contents of code snippet below.
  3. Paste the contents into your code snippet.
  4. Review any notes that I’ve provided.
  5. Save and enable the code snippet.
  6. Test.

Snippet

Let’s say you have a page where there is not enough content on the page to push the footer to the bottom, and the footer background is a different color than your page content. This presents a bad look, as the footer appears to be floating up on the page.

This code snippet ensures the footer is always placed at the bottom of the page. Ensure you add this code snippet so it applies to your entire website (i.e., globally).

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.elementor-location-footer {
    margin-top: auto;