WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Center and Adjust Footer Spacing (6 posts)

  1. adlawrence
    Member
    Posted 10 months ago #

    I'm having a terrible time centering my site's footer and changing the spacing. I'm hoping the Home to Contact links will all be on the same line and to tighten up the massive amount of white space above and below the footer. Here's my child CSS.

    Any ideas?

  2. DivByZRo
    Member
    Posted 10 months ago #

    To get your links to sit on one line find this code in your child CSS:

    .sidebar .site-footer .widget {
    	width: 228px;
    }

    and change the width value to a larger number like 700px.

  3. adlawrence
    Member
    Posted 10 months ago #

    Victory! Thanks, DivByZRo.

    Any ideas on where to plugin text-align: center so I can center the darn footer? Plus there's the whacky amount of white space above and below it.

  4. DivByZRo
    Member
    Posted 10 months ago #

    Re: whacky amount of white space :)

    In the footer file the height is set here:
    <div class="widget-area masonry" style="position: relative; height: 151px;">

    In the style.css file there is also padding added here :

    .site-footer .sidebar-container {
        background-color: rgb(255, 255, 255);
        padding: 20px 0px;
    }

    and here:

    .hentry {
        padding: 40px 0px;
    }

    For centering the footer text look in this area of the footer file:

    <aside id="text-3" class="widget widget_text masonry-brick" style="position: absolute; top: 0px; left: 0px;">
        <div class="textwidget">
            <p style="text-align: center;">

    It looks like the <p> is centering on the <aside> box not on the whole page.

    You could try using absolute postioning instead of text-align: center in the <p>, not sure.

  5. adlawrence
    Member
    Posted 9 months ago #

    Thanks, DivByZRo! Here's the updated code in my CSS that fixed it and centered the footer:

    `/** Upper footer */
    .site-footer .sidebar-container {
    background-color: #fff;
    padding: 0;
    }

    .site-footer .widget-area {
    margin: 0 auto;
    max-width: 1040px;
    width: 100%;
    }

    .sidebar .site-footer .widget-area {
    /*
    max-width: 724px;
    position: relative;
    left: -158px;
    */
    }

    .site-footer .widget {
    background: transparent;
    color: #002566;
    float: left;
    margin-right: 20px;
    width: 245px;
    }

    .sidebar .site-footer .widget {
    padding: 0;
    margin: 0;
    width: 100%;
    }`

  6. DivByZRo
    Member
    Posted 9 months ago #

    Glad to see you got it sorted!

Reply

You must log in to post.

About this Topic