Could you share a link to the site?
Sorry if you’ve already shared it – couldn’t find it in prior threads.
The site is still not live, but I took a screenshot which might clarify things a bit:
screenshot
When I look at the code, there is a inline statement of min-height on element, see this screenshot.
Hope this gives you a better idea of wat I want to achieve.
Okay thanks for the screenshots.
There are quite a few elements that could have margins & padding to cause a gap here. You’ll need to keep that min-height value because that ensures that the main content is at least as tall as the sidebar so it doesn’t get cut off.
Try this CSS to get started with:
.main {
padding-bottom: 0;
}
.single .entry,
.page .entry {
margin-bottom: 0;
}
It should at least reduce the gap if it doesn’t remove it entirely.
Thank you, I added your suggestions plus set some more padding / margin bottom to zero. This reduced the gap quite far but not completely.
Using the firefox inspector, the only item that runs completely through to the gray footer is:
<section id=”main” class=”main” role=”main” style=”min-height: 1354px;”>…</section>
but I can’t see any margin or padding declared to the bottom >0.
If you could help me with this, I would be very gratefull. The gap is already much better, but it would be nice if it were possible to minimize it just a bit more.
thanks in advance,
Bert.
I transferred the site to my website so you can view it online here:
view website
I also noticed that there is a bit of a strange thing: I wanted to change the background color of the <footer>. This left a small block right of the footer in the original bg color. I can change this using footer::after, but then the left sidebar moves a bit up and down when you scroll up and down on the main page.
Do you have any idea why this is?
This CSS should fix the background color issue with the footer:
body {
background: #F0F1F2;
}
.site-footer .design-credit,
.site-footer:after {
background: none;
}
Some of the CSS behind-the-scenes is a little tricky to make the theme adapt so much to the different mobile, tablet, and desktop layouts.
Previously, I said removing the min-height value on main would be a bad idea, but now seeing the way your sidebar is setup, it will be okay to add this code which will remove the rest of the space above the footer:
.main {
min-height: none !important;
}
As long as the sidebar is kept short like it is now so it will always fit on screen, there won’t be any issues. There will only be an issue if the sidebar is longer than the main content.
-
This reply was modified 6 years, 2 months ago by
Ben Sibley.
Your css solution for the footer background works perfect, so thanks for that! I tried the min-height alteration as you suggested, but that doesn’t do a thing. It keeps the min-height as it is declared inline as I discribed in my previous post.
I added a screenshot of the inspector after adding your piece of css:
screenshot
Furthermore I read several articles about using !important and they all seem to discourage the use.
Do you have any other idea how to go about it?
I just found a solution after reading some more on internet:
section#main[style] {
min-height: 100px !important;
}
the declaration none wasn’t valid, so I tried a specific number in pixels, but still had to add the !important bit.
Ah whoops. max-height allows none but min-height needs a numeric value, so using 0px or just 0 will work fine.
I don’t use !important in the CSS when making themes so that the code is easy to overwrite, but in this case the goal is to ensure we overwrite the existing CSS so adding !important just to be certain it will work is fine.
