Support » Theme: Hueman » Remove the white space between content and footer on the front page

  • Resolved Ulrike

    (@jule3110)


    Hi,

    I’m building a website (www.theheadäche.de) using the really nice theme “Hueman” and everything is fine except one little thing. Is it possible to remove the white space between the content and the footer on the main page or at least to change the color?

    Instead of a child theme I’m using a plugin for custom CSS where I already have changed the background of the page and footer content.

    I would be so happy if someone can help me!
    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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

    lisa

    (@contentiskey)

    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;
    }
    Thread Starter Ulrike

    (@jule3110)

    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 4 years, 10 months ago by Tim.
    Thread Starter Ulrike

    (@jule3110)

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove the white space between content and footer on the front page’ is closed to new replies.