How can I prevent this white space from showing when browser window gets small?

[iizag]

Hi , on this page of mine : http://iamdentistry.com/timeline/ , when you shrink the size of the browser window there is a white space gap that appears between the end of my timeline block and the start of my footer. What part of my Css code do I need to fix to prevent this? Ideally, I want the end of my timeline block to always expand with the size of the browser window, so no matter if your on an Ipad or you shrink your browser screen size there will be no white space gap appearing.

http://iamdentistry.com/timeline/

If this helps, in regards to the format of this page this is the code I have in place:

#post-6418 {
    margin-bottom: 0;
    padding-bottom: 0;
}
#post-6418 .entry-content {
margin: 0;
}

.singular-page-6418 #main {
margin-top:0.1em;
}

Thank you for any help

[nigelc]

At line 101 of your responsive CSS file you have a bottom-margin of 3em applied to the #primary element:

@media only screen and (max-width: 1000px) {
#container #primary, #container #content, #container #secondary {
float: none;
margin: 0;
padding: 0;
width: 100%;
}
#container #primary {
margin-bottom: 3em;
}
}
<code></code>
This bottom margin kicks in at 1000px wide. Deleting it should do it.

[Author]

Posts