CODEWITHSUNDEEP
htmlcsswordpress
honey_badger
honey_badger

Reputation: 5

White Gap at the bottom of the page

Site: http://stagingsite16.info/

Screenshot below:

enter image description here

Problem:

As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)

I tried applying this code:

html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

but still it doesn't solve my issue. Any help is really appreciated! :)

Upvotes: 0

Views: 288

Answers (3)

morric
morric

Reputation: 1243

I've used this in a user style sheet locally and it seems to fix the problem:

.builder-container-outer-wrapper {
    margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
    margin-bottom: 0px;
    padding-bottom: 1.5em;
}

Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)

Anyway, hope that helps.

Upvotes: 0

jordy korsten
jordy korsten

Reputation: 170

You have to place the div of the footer outside all the other divs , and then add:

div#builder-module-537dadf9ae69e-background-wrapper 
{
   background: #2c2c2c;
   color: #fff !important;
   padding-top: 0px;
   margin-bottom: 0px;

}

you had this before:

div#builder-module-537dadf9ae69e-background-wrapper
{
   background: #2c2c2c;
   color: #fff !important;
   padding-top: 20px;
}

But you have to move the div outside the other divs!!

Upvotes: 1

qtgye
qtgye

Reputation: 3610

.builder-container-outer-wrapper {
    margin-bottom: 0;
    width: 100%;
}

This is the container which has the margin-bottom.

Upvotes: 0

Related Questions