Sometimes, your website pages might not have much text or content. When this happens, the footer can end up in an odd spot on the page, which may not be an ideal case for your website.
To fix this, you can make the footer stick to the bottom of the page. That way, no matter how much or how little content there is, the footer will always be at the bottom where it belongs.
This article shows you how to do this using the following CSS code:
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.admin-bar #page{
min-height: calc(100vh - 32px);
}
#page .site-content{
flex-grow: 1;
}
How to Add Additional CSS to your WordPress Website?
Please follow the steps below to add the above CSS code to your website.
- Navigate to your WordPress Dashboard
- Head over to Astra > Customize.
- Scroll down to the bottom and choose Additional CSS.
- Paste the above code into the editor.
- Click on this Publish button.
That’s it! The footer should stick to the bottom of your website now:
We hope this article helps you. If the above solution does not change the position of your website footer, please contact us by opening a ticket below.
