Align footer when screen size shrinks

Community Forums Forums Design Tips and Tricks Align footer when screen size shrinks

This topic is: not resolved

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  derekalvarez 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #47595

    derekalvarez
    Participant
    Post count: 47

    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/
    #47604

    Chris Cree
    Participant
    Post count: 147

    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.


    #47717

    derekalvarez
    Participant
    Post count: 47

    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.

    #47918

    Chris Cree
    Participant
    Post count: 147

    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.


    #48025

    derekalvarez
    Participant
    Post count: 47

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.