I have been developing Divi sites for a while and not until recently did I find the solution to a bugbear most Divi developers have, the floating footer!
Sometimes there will be pages that you create for your customers which may not have a lot of content, making the page quite small in height. When this is the case, the website footer will be found where your content finishes and this may display the footer mid page.
I found several ways of addressing this issue online, but most included the use of Javascript. I have a more elegant and less code heavy solution, which I now use on all my projects.
The code below fixes your footer to the bottom of the screen regardless of the amount of content found on the page.
/*Sticky Footer*/
html, body {height: 100%}
#page-container {position: relative; min-height:100%; height: auto !important; height: 100%; padding-bottom: 60px;}
#main-footer {position: absolute; bottom: 0; width: 100%; height:60px;} /*Change name of footer section and height accordingly*/
This is the one line of code that finally worked for my sticky footer issues. But it’s not responsive. Any guidance on how to make this be responsive? Thanks!
Glad the code worked for you. Unfortunately, I do not offer support on this blog as these are based on my experiences when developing and with the latest Divi updates this code may no longer be compatible.