Remove the white space between content and footer on the front page

Hello ??

Try adding the following code in custom CSS section where you already have the code.

.main-inner {
    background: #1a1d1d;
}

Let me know if you need further assistance ??

Sajid

Hello @jule3110,

Yep! You can do that with css:

.main-inner {
   min-height: auto;
}

Or just change the background color with

.main-inner {
   background-color: #000000;
}

Have a great day!

Andrei

the “white space” is the background of the “main” element

try this
change the color to something else by adding code like this using your CSS plugin

.main {
    background-color: #1a1d1d!important;
}

Oh wow! You are soo fast!! ??

Thanks a lot to you all, that works perfect!
But if this is so easy, perhaps there is also a way to change the background of the footer menu? And what’s about the two white lines before and after the main content?
(It’s the website for a blues-punk-band and the guys are more metal and don’t like white :)))

Hey,

I just want to tack onto my colleague Sajid advised, with the solutions here you would be left with a white border, should you wish to remove that you can add something like:

.boxed #page {
    padding-bottom: 0;
}

I wish to briefly talk about the use of !important as that was a recommendation in this ticket, personally I’d avoid including that within CSS except where absolutely required to force a change. You should pretty much always be able to be more specific and in doing so honour the flow of cascading style sheets. It can make further edits a little more tricky if !important is always used with every edit.

To read more about specificity and the use !important you can read up here:

https://developer.mozilla.org/en/docs/Web/CSS/Specificity#The_!important_exception

Hope this helps. ??

I see you just posted second before me with an update ??

The footer menu:

#nav-footer.nav-container {
    background: ##33363b;
    border-top: 0;
}

And for the anchor (arrow up) background:

#footer-bottom #back-to-top {
    background: ##33363b;
}

Bottom and top borders:

.boxed #page, .page-title {
    padding-bottom: 0;
    border-bottom: 0;
}

I used #33363b to match the top nav colour.
Cheers.

• This reply was modified 7 years, 11 months ago by Kye.

All white spaces are gone now, thanks so much, Timothy!

I’m not yet good enough with CSS to figure out by myself what code I have to use, so I’m really glad to get so much useful help here. I also appreciate what you have written about the use of !important.

Wish you all a peaceful time!