Full width footer

  • Resolved shiftychris

    (@shiftychris)


    9 years, 1 month ago

    Hello everybody,
    I am new to wordpress and I can’t figure out how to make my footer full width. I have set up a child theme and I want to start to fill the site with content, but I can’t get the footer to be displayed in full width.

    I mean the #303030 Area on the bootom on Falzmaschinen-test.de

    It would be great if someone could help me, because I am stuck for days.
    Thank you

Viewing 11 replies - 1 through 11 (of 11 total)

  • Right now, your <body> tag is set to a max width of 1080px. That includes the footer. In order to increase the footer width, you’ll need to make the <body> width 100%, then change the width on the main content section of your blog to max width 1080px, and possibly also set the footer width to 100%.

    Thread Starter shiftychris

    (@shiftychris)

    Thank you very much –
    but I want to keep my content section width at 1080px.
    Is there a way to get the footer out of the body to set it to 100%?

    You can’t have the <footer> outside of the <body>, unfortunately. But you can definitely do what you want to do. Remove the max width on your body tag, then set the width of your header, nav and content containers, etc., to 1080px. You may have to tweak the CSS a bit, but it’s all do-able.

    Thread Starter shiftychris

    (@shiftychris)

    Hi,
    its me again- I removed max width out of my body tag and I set the footer to 100% but nothing happened. Here is the footer section of my css, perhaps I missed something:

    * 7.0 Footer
    * —————————————————————————-
    */

    .site-info {
    display:none;
    }

    .site-footer {
    background-color: #fff;
    color: #fff;
    font-size: 14px;
    text-align: left;
    }

    .site-footer .widget-area,
    .sidebar .site-footer {
    text-align: left;
    }

    .site-footer a {
    color: #303030;
    width: 100%
    }

    .site-footer .sidebar-container {
    background-color: #303030;
    padding: 0px 0;
    width: 100%;
    }

    .site-footer .widget-area {
    margin: 0 auto;

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

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

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

    .sidebar .site-footer .widget:nth-of-type(4),
    .sidebar .site-footer .widget:nth-of-type(3) {
    margin-right: 0;
    }

    .site-footer .widget a {
    color: #3399cc;
    }

    .site-footer .widget-title,
    .site-footer .widget-title a,
    .site-footer .wp-caption-text {
    color: #fff;
    }

    .site-info {
    margin: 0 auto;
    max-width: 1040px;
    padding: 30px 0;
    width: 100%;
    }

    #wpstats {
    display: block;
    margin: -10px auto 0;
    }

    Thread Starter shiftychris

    (@shiftychris)

    Hello again,
    I removed the max-width line out of the body tag and set the footer to 100% but nothing happened. I have no clue what is wrong with the code.

    Can you tell me where I have to modify the code in my footer section?

    This is my Body:

    body {
	margin: 0 auto;
	width: 1080px;

}

    And this is my footer:

    .site-footer {
	background-color: #303030;
	color: #303030;
	font-size: 14px;
	text-align: left;
	width: 100%;
}

    Set the width on <body> to 100%. Then set your #main to a max-width of 1080px, and margin: auto. That should get you most of the way there. 

    max-width: 1080px !important;
margin: auto !important;
    Thread Starter shiftychris

    (@shiftychris)

    Hi I set the max-width to 1080px and the margin to auto, both !important, in my .main lines.
    But that didn’t solve my problem. I guess I have to live with that tiny footer. ??
    Ther seems to be no easy way to get the footer full-width.

    It looks like you set the <body> to 100%, and updated .site to 100%, instead of #main, is that right? (Apologies if I’m wrong about what you changed, I’m trying to guess from what I can see using the browser inspector.) The <footer> is nested within .site, so when you set .site to a max width of 1080px, it also sets the <footer> to that max width. If you only set the max width on #main instead, your <footer> should stay at 100% without needing any adjustments.

    #main {
    max-width: 1080px !important;
    margin: auto !important;
}
    Thread Starter shiftychris

    (@shiftychris)

    Thank you sooo much –
    you was right, I changed the wrong line. (No need for apologigies ;))
    And now I have to do the same with my header and my navbar?

    Nice! And yes, you’re right, you want to set your nav and/or anything that is not properly aligned to max width 1080px. You may also need to add some padding or margin if you want them to align with the text in your main content. Looks like the main content has left padding of 60px. I’m not sure which parts of the site you want to align. If you want the header and nav to align with the text, you probably want to add this CSS:

    .home-link {
    padding-left: 60px !important;
}

.menu-menu-container {
    padding-left: 25px !important;
}

    You may have to adjust the pixel numbers, but that’s the general idea.

    Thread Starter shiftychris

    (@shiftychris)

    Thank you very much –
    you helped me a lot! I fixed the padding and I am realy happy right now!
    Thank you for solving my problem.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Full width footer’ is closed to new replies.