If page content is short the footer can end up half way up the screen. This CSS ensures its always that the page content is always big enough for the footer to be at the bottom:
/*----- FORCE FOOTER TO ALWAYS BE AT THE BOTTOM -----*/
/* Make the body fill the viewport height and use flexbox */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Make the main content area fill the remaining space */
main {
flex-grow: 1;
}
/* Position the footer at the bottom */
.elementor-location-footer { /* Or use the specific class of your footer */
margin-top: auto; /* Push the footer to the bottom */
}
