[Solved] make footer widgets closer together and centered with layout

[klaw718]

Okay one last question guys: what’s the right code for making the widgets more centered and also make the bottom-border under the titles shorter? I have the genesis framework and everything on the page was in a structural wrap, so I removed the footer widget wrap so I could make the footer area full width. All I want to do now is line up the widgets with the main body of the site so the widgets don’t look so spaced out and messy. Also, the bottom-border is too long, as you can see from my site, http://www.thepeacetribe.com.

[MOD EDIT – Codedump removed]

Please let me know if you have any suggestions. Thanks in advance for your help!

• Kristen

[Paulie_D]

Now you’re doing what we call codedumping and we kinda frown upon it.

It takes up too much space, is rarely useful without the accompanying HTML and is often incomplete or not actually related to the issue.

Try a link instead…if you can’t create a reduced case demo.

[Paulie_D]

Your main content width is restricted by a wrapping div with these classes

.site-inner .wrap {
clear: both;
margin: 60px auto;
overflow: hidden;
max-width: 1240px;
padding: 0px 60px 0px 60px;
}

so you could copy some of those properties (specifically the max-width) over to

.footer-widgets .wrap {
background-color: #006B24;
clear: both;
color: #fff;
max-width: 1240px; /* here */
overflow: hidden;
padding: 40px 70px 0px 70px;
text-align: left;
margin: 0 auto; /* added to center element */
}

Also move the bg color to

.footer-widgets {
clear: both;
overflow: hidden;
width: 100%;
}

…and it will be full width green.

[klaw718]

okay sorry about that, the link to my site is listed above. I don’t really know what html or css to put here to start a case..

[Paulie_D]

Also, the bottom-border is too long

It’s not clear what you mean but if you’re referring to the white border under “About” and “Site” etc….well that’s a little complex.

How long is too long?

The element with the border is an h4 and headings like that are 100% wide by default.

So, again, how long is too long?

What ‘look’ are you after?

[klaw718]

I don’t want the lines to be touching one another, it looks as if there’s no space between them. Also, I think the bigger issue is the spacing of the widgets themselves. I’m trying to figure out what’s wrong with my code so that I can space them evenly and make them line up with the main content of my site (the posts and sidebar).

[klaw718]

nevermind, I fixed it.

[klaw718]

thanks for your help!

[Author]

Posts