Ask your WordPress questions! Pay money and get answers fast! (more info)

Need browser window from scrolling after the footer ends

  • 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)

2014-03-15

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;
}

2014-03-15

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;