Align footer to bottom of page

Introduction

It can be quite annoying to see your footer floating around aimlessly at the middle of the page rather than sitting nicely at the bottom of the page. In this tutorial, learn how to quickly get your footer to align to the bottom of the page, regardless of how much content you have on the page.

Solution

General Solution

If you’re using the latest version of the Elementor Hello Theme, as well as most themes, then add this code snippet to your global CSS settings using your favourite tool.

body{
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/* Method 1: Targetting the main */
main{
    flex-grow: 1;
}

/* Method 2: Targetting the footer */
/* footer{
    margin-top: auto;
}
*/

If this doesn’t work, and you’re using the Elementor Pro Theme Builder, then try this code instead:

body{
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}



/* Method 2: Targetting the footer */
.elementor-location-footer{
    margin-top: auto;
}

Extra for Astra Theme

Astra Theme adds a few wrapper divs as a child element of the body and to wrap the main content area, so try this CSS instead.

:is(body:not(#inspec), .site){
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main, .site-main, .site-content{
  flex-grow: 1;
}