This is because you don’t have enough content on the page to push the footer down past the height of the screen resolution. If you add more content into a page it’ll force it down and decrease the white space.
If you plan to only have a small list of content on certain pages you can get around it by adding the following to your CSS
body {
background-color: #3a3a3a;
}
#page {
background-color: #FFFFFF;
}
Which should work across the site.
Hi,
The code you gave me failed because the footer area now occupies a third from the bottom of the desktop screen.
See: https://druzal.com/about/
Maybe I should use a different plugin to show footer?
Regards,
Yunis
-
This reply was modified 5 years, 8 months ago by
Yunis777.
Hi @yunis777 ,
It seems like you have less content, and that is why your footer is close to your content.
You can stick your site footer no matter what your content length is. Here is the documentation that will help you in doing so: https://wpastra.com/docs/how-to-stick-footer-to-bottom-when-page-content-is-less/
Regards,
Deepak
Hi,
A more obvious problem that i would like to see slightly corrected: how can the height of the footer be adjusted (reduced)? It would be nice if such a problem did not require a ‘tonne’ of custom CSS code to fix.
Hi,
Another problem I have encountered is the visibility of a dark bar under the footer on my page https://druzal.com/about/.
Also see screenshot: https://postimg.cc/Q9mT2Xhq
How can this be fixed?
Regards,
Yunis
Hello @yunis777,
This is because the content on the page is less and hence your footer is close to your content due to which you are you are getting that space.
Could you please add the following filter code into the child theme’s functions.php file:
add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
?>
<script type="text/javascript">
document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}
</script>
<?php
}
Regards,
Sweta
Still have a white space under the footer. I already add the code to function.php Astra child theme
Hello @ericph
Please open a ticket with us for quicker resolution.
Even our technical team will be able to take a closer look and help you out accordingly.
Looking forward to hearing from you!
Regards,
Suman
I have the opposite question: Does anyone know how I can add space below the footer so I can anchor an horizontal ad there. Thank you.
The space should be below:
Copyright © 2020 · Your Travel Places
Contact Us · Privacy Policy · Disclaimer
My website is: https://yourtravelplaces.com/
-
This reply was modified 5 years, 1 month ago by
nthobbs.
-
This reply was modified 5 years, 1 month ago by nthobbs.
Hello @nthobbs
For such a requirement where you need to place an Ad and make it closable can’t be achieved using the theme.
You will need to use plugins like ConvertPro this could help or use Astra Pro’s Custom Layouts you can create a Sticky Footer, but it won’t be clickable.
I hope that helps.
Regards,
Suman
