Gap At Bottom of Website

Gap at the bottom of page

Set your

    body {overflow:hidden}

Gap at bottom of website

• On #page-wrapper, add overflow: hidden to clear the floats.
• On #page-wrapper, remove the box-shadow rules.

That removes the gap.

I did manage to add back in the shadow while prevent the gap from re-emerging.

It went something like this:

• Also add overflow: hidden to #page.
• Move the width and margin properties from #page-wrapper to #page.
• Readd the box-shadow properties to #page.
• Fix the backgrounds - #page-wrapper should not have a background any longer. There's one being applied in a couple of places.

Unexplainable gap on bottom of web page

I should elaborate. The problem is caused by the code <iframe name="google_conversion_frame"...

Because this iframe is in the flow and has layout, it is being added at the bottom of the page and adding the space. Your best bet would be to apply a style to it, giving it position: absolute; and a left: -5000px; or similar style to remove it from view.

White gap at the bottom of web page

Try

body {
    margin: 0px;
    padding: 0px;
}

If you don't need border you may add third rule (one of):

border-width: 0px;
border: none;

If you need to remove only this on down of the screen, use:

margin-bottom: 0px;
padding-bottom: 0px;

This won't even touch this on left or right.

White Gap at the bottom of the page

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.

Why is there a gap in color at the bottom of my webpage?

just add h3{ margin-top: 0px; } to your css code to remove the white line between the red divs at the bottom of the side

White gap at the side of website

The Problem is width of your form element(width: 48.821174201%;).

Solutions:

#plans .affiliateSection form
{
    background-color: red;    
    /* Add width:auto;*/    
    width: auto; 
}

OR

#plans .affiliateSection
{
    overflow:hidden;
}

Jsfiddle

---

Related Topics