Hi! I tried searching the forums for my issue but wasn’t able to find anything. On pages without sidebars (and designed using Visual Composer), there is always a space underneath the footer if there’s only a few lines of content on the page. Here’s an example picture.
If I add padding-bottom to my content and push the footer down, it looks normal, but I’m wondering if there’s a recommended approach from the TagDiv team 🙂 Can we force the footer to be at the bottom of the screen?
Thanks!
Hello,
I have tested this on my ed but could not recreate it. The footer always stays in the bottom of the page and this is how it was supposed to do. Maybe something on your site is affecting the footer. Please provide a link to your website so we can inspect the issue. Also check any custom modifications you may have to your website and make sure all tags are closed. When you experience any situation that seems out of place, compare your website to the official demo to see how it should display by default: http://demo.tagdiv.com/newspaper/
Let us know how it goes.
Thank you!
Thanks, Bogdan. You were right; the culprit was some custom CSS I had added (see below). When I remove it, the page displays exactly like the official demo (with no space under the footer even on pages without any content or sidebar).
So that solves that problem, but the reason I added the below CSS is because I wanted to use the Style 8 footer template without all the blank space at the top of the footer. Any thoughts of a good way to achieve a very compact version of the Style 8 footer with CSS?
/* Footer space reductions */
.td-footer-wrapper {padding-top:0px !important;}
.td-footer-bottom-full {margin-top:0px; padding-top:25px;}
.td-footer-bottom-full .td-container:before {content: none;}
Hello,
It seems a bit strange as this code does not influence the bottom side of the footer.
Please try this code instead and see how it goes:
.td-footer-wrapper{
padding-top:0!important;
padding-bottom: 0!important;
}
.td-footer-bottom-full{
padding-top: 10px;!important;
padding-bottom: 10px!important;
}
Thank you!
Thanks, again. You’ve helped me isolate the issue and find some fixes. It turned out to be a combination of things: the footer CSS code + the below custom CSS:
.td-main-page-wrap {padding-top: 5px!important;}
I was using that line to reduce space between the header and my content blocks. For others with the same problem, some possible fixes: 1) add the .td-main-page-wrap custom CSS only to pages with lots of content (instead of globally with Custom CSS panel), or 2) if you reduce the padding-top of .td-main-page-wrap by X amount, add the same X amount to the padding-bottom of .td-main-page-wrap.
That should fix it 😉
