Align footer when screen size shrinks

[derekalvarez]

How do I align my footer when the screen size shrinks? Currently, the header and content stay aligned, but the footer moves to the right. You can see this by making your browser window smaller or viewing it on the iPad.

http://blondiestrophyroom.com/

[Chris Cree]

In line 1302 of your stylesheet you have this:

#footer .gototop {
	float: left;
	padding: 0 0 0 250px;
	width: 150px;
}

The padding is throwing your Return to top of page off center. You can either zero that out or add

#footer .gototop {
	padding: 0;
}

to the 1024px media query in the responsive portion of your stylesheet.

[derekalvarez]

Thank you, Chris. I tried that and it didn't work because I think I didn't communicate clearly what I need... The bottom part of the bear image is not aligning with the rest of the bear when the screen gets smaller.

[Chris Cree]

You've got different width boxes for the #inner div and the #footer div. Your #inner div is 1130px wide and your #footer div is 1400px wide;

If you want the elements to move together as the page width gets narrower you going to want to make them the same width to start with.

[derekalvarez]

That sounds like it would work, Chris. But I experimented and found this solution...

I removed the Genesis viewport code from my functions.php file and then added this code to "Genesis>Theme Settings" in the wp_head() area...

<meta name="viewport" content="width=1400, maximum-scale=1.0" />

That did the trick for me because in this case I wanted everything to scale down just like it looks on the desktop.

[Author]

Posts