Need browser window from scrolling after the footer ends WordPress
- SOLVED
Trying to get the browser window from scrolling after the footer ends in Safari, Firefox, Chrome etc.
Seeing white space after the footer on a larger monitor. (see attachment)
Also would like to close up the spacing between the content and footer.
Thanks!
http://bentonstudios.com/power2/home/
Answers (2)
zebra webdesigns answers:
Hello Steve
I wonder how big the monitor is to see the white space below the footer.
Can you please specify the monitor width which you are seeing.
and to close the extra space between the content and footer
http://bentonstudios.com/power2/wp-content/themes/Builder-Acute-Blue-Custom/style.css
in this CSS in line number 132
there is a css like below
.builder-module-element {
margin-bottom: 3em;
}
change the 3em to 0.
.builder-module-element {
margin-bottom: 0;
}
Final Code
html, body,.builder-container-background-wrapper,.builder-container-outer-wrapper {
height: 100%;
}
.builder-container{
min-height: 100%;
padding-bottom: 75px;
position: relative;
}
.builder-module-footer-background-wrapper{
position:absolute;
}
@sebastian padding-bottom is needed and please when you take my answer refer it before using it.
also editing the answer and posting your solution is not good mate. I edited my answer because you made it look like you provided the solution first.
zebra webdesigns comments:
One more suggestion the background image of the footer is not center aligned.
you can see that if you zoom out. for that you need to add the following css
.builder-module-footer-background-wrapper {
background-position: center center;
}
or you can add background-position to the style in the particular CSS in line number 603
http://bentonstudios.com/power2/wp-content/themes/Builder-Acute-Blue-Custom/style.css
Steve Benton comments:
24" monitor. Thanks.
zebra webdesigns comments:
Hello Steve
I just found an article and trying to implement for yours.
Here it is
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
zebra webdesigns comments:
Hello Steve
adding the following CSS will make the footer stick to the bottom of the site.
Though there is a round up for making the footer to stick to the bottom , It wont be a best solution here.
I assume the contents are created with some kind of content builder supplied with theme.
and because of that the css looks a kind of weird.
shall we implement the suggestion provided by the link which I sent to you
BTW have PM ed you
zebra webdesigns comments:
Sorry I didnt add the css in the last message. Because it didnt worked in the exact way
zebra webdesigns comments:
Hello Steve
Please use the following CSS
I have checked and it works
.builder-container{
min-height: 100%;
padding-bottom: 75px;
position: relative;
}
.builder-module-footer-background-wrapper{
position:absolute;
}
zebra webdesigns comments:
Hello Steve
I have provided the complete CSS here
I hope this will resolve your hunt
html, body,.builder-container-background-wrapper,.builder-container-outer-wrapper {
height: 100%;
}
.builder-container{
min-height: 100%;
padding-bottom: 75px;
position: relative;
}
.builder-module-footer-background-wrapper{
position:absolute;
}
Sébastien | French WordpressDesigner answers:
The good code is :
html, body,.builder-container-background-wrapper,.builder-container-outer-wrapper {
height:100%;
}
.builder-container{
min-height:100%;
position:relative;
}
.builder-module-footer-background-wrapper{
position:absolute;
}
I think you don't need padding-bottom: 75px;