Forums

RyanPayne

Hello all,

I've got an annoying problem I can't seem to solve - I'm trying to get my footer to go all the way across but there is white space both on the left and right sides.

I'm very new to CSS so I've probably dug myself into this problem but I can't seem to find any solutions.

The site is kangaroobranding.com and I'm trying to get my footer to look like this. I'm in a Genesis child theme for wordpress and I have 3 footer widgets that have filler text in as well.

I think this is the code you need? - from my style.css file.

/* Footer Widgets
------------------------------------------------------------ */

#footer-widgets {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 2px #999;
	-webkit-box-shadow: 0 1px 2px #999;
	background-color: #4D4D4D;
	border-radius: 0px;
	box-shadow: 0 1px 2px #999;
	clear: both;
	font-size: 14px;
	margin: 20px auto 0;
	width: 100%;
}

#footer-widgets .wrap {
	overflow: hidden;
    	padding: 25px 30px 10px;
}

#footer-widgets .widget {
	background: none;
	border: none;
	margin: 0 0 15px;
	padding: 0;
}

#footer-widgets p {
	font-size: inherit;
	margin: 0 0 10px;
}

#footer-widgets ul {
	margin: 0;
}

#footer-widgets ul li {
	border-bottom: 1px dotted #ccc;
	list-style-type: none;
	margin: 0 0 5px;
	padding: 0 0 5px;
	word-wrap: break-word;
}

#footer-widgets #wp-calendar thead,
#footer-widgets #wp-calendar td {
	background: none;
}

#footer-widgets .widget {
	margin: 0 0 15px;
}

.footer-widgets-1 {
	float: left;
	margin: 0 30px 0 0;
	width: 280px;
}

.footer-widgets-2 {
	float: left;
	width: 280px;
}

.footer-widgets-3 {
	float: right;
	width: 280px;
}

/* Footer
------------------------------------------------------------ */

#footer {
	clear: both;
	font-size: 14px;
	margin: 0 auto;
	width: 100%;
	text-shadow: 0px 0px #fff;
	background-color: #4D4D4D;
}

#footer {
    text-align: center;
}

#footer .wrap {
	overflow: hidden;
	padding: 25px 10px;
	
}

#footer p {
	font-size: 14px;
}

#footer a,
#footer a:visited {
	color: #ffffff;
}

#footer a:hover {
	color: #ec9208;
	text-decoration: none;
}

#footer .gototop {
	float: left;
	width: 20%;
}

#footer .creds {
	float: right;
	text-align: right;
	width: 75%;
}

Also, whenever I edit my Wrap section the entire site goes haywire so I'm hoping for a solution that will allow my footer to go across the entire page without disrupting anything else.

Thank you very much!
Ryan

Senff

You'll need to move the footer outside of the #wrap. As long as it's in there, it will be restricted to the 960px width that you assigned to #wrap.

Right now you have this markup:


[wrap]
    [nav]
    [header]
    [home-welcome]
    [home-slider]
    [inner]
    [footer-widgets]
    [footer]

And this is what you need:


[wrap]
    [nav]
    [header]
    [home-welcome]
    [home-slider]
    [inner]
[footer-widgets]
[footer]

Hope that helps!

RyanPayne

Sweet!

I understand entirely now but I'm just not entirely sure how to do it yet, haha. Is there a code I can implement or do I place those two sections above the [wrap]? Sorry if it's obvious, I'm still learning haha.

Thank you for your help!
Ryan

knittingfrenzy18

You'll need to go into the HTML and move the two elements outside the wrap.

Also, if it helps, add a reset of

* { margin: 0; padding: 0; }

RyanPayne

I'm not sure where to edit the HTML as I'm working in wordpress - can I do this with css in style.css?

Thanks for your help!

Senff

Try this: in FOOTER.PHP, you should take the last </div> you can find, and move it right above the line <div id="footer-widgets">.

If you can't find <div id="footer-widgets"> in your FOOTER.PHP, find the code that calls the footer widgets, and place the </div> above that.

RyanPayne

I'm running a child theme on top of Genesis so the footer.php file I found was in the Genesis folder - probably should have mentioned this before, sorry, long day, hah.

The code is below:


<?php
/*
 WARNING: This file is part of the core Genesis framework. DO NOT edit
 this file under any circumstances. Please do all modifications
 in the form of a child theme.
 */

/**
 * Handles the footer structure.
 *
 * This file is a core Genesis file and should not be edited.
 *
 * @category Genesis
 * @package  Templates
 * @author   StudioPress
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     http://www.studiopress.com/themes/genesis
 */

genesis_structural_wrap( 'inner', '</div><!-- end .wrap -->' );
echo '</div><!-- end #inner -->';

do_action( 'genesis_before_footer' );
do_action( 'genesis_footer' );
do_action( 'genesis_after_footer' );
?>
</div><!-- end #wrap -->
<?php
	wp_footer(); // we need this for plugins
	do_action( 'genesis_after' );
?>
</body>
</html>

I got an error for any spot I tried to place the last . I feel like I'm so close to seeing the solution but I'm missing it, hah. Thank you all for your help, I do very much appreciate it.

Senff

Try replacing all that with this:


<?php
/*
 WARNING: This file is part of the core Genesis framework. DO NOT edit
 this file under any circumstances. Please do all modifications
 in the form of a child theme.
 */

/**
 * Handles the footer structure.
 *
 * This file is a core Genesis file and should not be edited.
 *
 * @category Genesis
 * @package  Templates
 * @author   StudioPress
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     http://www.studiopress.com/themes/genesis
 */

genesis_structural_wrap( 'inner', '</div><!-- end .wrap -->' );
echo '</div><!-- end #inner -->';

echo '</div><!-- end #wrap -->';

do_action( 'genesis_before_footer' );
do_action( 'genesis_footer' );
do_action( 'genesis_after_footer' );
?>

<?php
	wp_footer(); // we need this for plugins
	do_action( 'genesis_after' );
?>
</body>
</html>

It does say "This file is a core Genesis file and should not be edited" so I'm not sure if it's actually allowed, but just give it a try and see what happens.

RyanPayne

IT WORKED! I keep refreshing my page just to make sure, haha.

You are a lifesaver, I've been stressing over this the entire day.

Thank you so much!

dclardy64

If you are using a child theme, you need to place this in the root of your child theme. If not, you are going to lose this when you update.

So just copy this file to the child them and make your changes. It will look the same and protect you from updates.

therealfoulks

I am having the same problem using a different theme (fresh cover) on http://theknoizpaper.com/ could you all direct me to the files I might be overlooking? Ive looked everywhere from footer to stlyesheet.

kisukedeath

Thank you so much, it works!

Patri

OMG, it does work!!! I had the EXACT same problem as RyanPayne; had searched for ever and couldn't find the appropriate answer... totally understood the solution here; Senff explained BEAUTIFULLY how we needed to get the footer 'outside' of the #wrap; and then... whistles & bells; Senff's code which TOTALLY WORKS.

Thanks so much guys!!!! Truly appreciate it!! :)

kerramel

Thanks for the code guys! :)

treehouse : what would you like to learn today?

Forums

[Solved] Footer Help - Won't Go Across Page