Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #5549

    On high resolution monitors (1600 x 900) my footer does not stretch to the bottom of the page. What’s the best way to make is stretch to the bottom?

    My site is:





    there’s no real solution for this problem because you’d need to calculate the screen resolution & the required height of the main content and/or footer area. I can only offer a static solution which has the disadvantage that users whith small screens need to scroll. Open up style.css, add following code and adjustthe height value:

    #footerwrap {
    height: 300px;


    I’m also having the same problem with the Angular theme. And the above CSS doesn’t work for me.

    Here’s a screen shot (as I’m testing locally):

    My background image is shown, and I need the footer to drop to float to the bottom of the page.

    Please help and thanks!



    Hi wildefranz,

    For Angular, you would need to use this:

    #footer .container {
    padding: 20px 0 50px;




    Hi Mya,

    Unfortunately that didn’t work…

    Do you have another suggestion? Is it because my main page is set to stretched while the rest are boxed layout?

    Thanks for the help!



    Well, it does work if I put it in layout.css, but it’s tooooooo huge now. When I adjust to 250px, it fits. BUT when I resize my browser for mobile it’s too small….



    I wasn’t able to reproduce the problem. Is there a chance you can put it online so we can check it live? This would allow us to provide a specific solution.




    I’ve just set it up live now. Is there an email where I can send a login and user to you to check? You will only be able to see it live if I send you those details (it’s up, but I have a plugin running that if you’re not logged in you won’t be able to see anything…)





    You can send over your login information to (Email address hidden if logged out)

    Don’t forget to refer to this topic and/or elaborate your issue :)




    I have sent it…thank you!


    Bump. (please!)


    Hi wildefranz,

    Just in case Chris is not able to check back in quickly, You can send the information to my email at DevinVinson (at) Make sure to include a link to this topic so that my spam filter doesn’t grab it :)




    Thanks Devin! I have sent it to your email.



    Hi Sara,

    I took a look and unfortunately the solutions above are about it. The restrictions of the theme + the nature of resolutions means you would need to do some javascript/css trickery to determine the users screen size then resize the page elements to push the footer down. The css is the most straightforward but requires some restructuring of the containers and container styles.

    If you’re interested in that, there are some good tutorials out there for it but applying them to the theme will probably take a bit of finesse. I believe the jargon is “Sticky Footer” for the effect you’re looking for to help in googling :)




    Great Devin! Thanks for following up. I will take a look and post anything if I find it!




    Thanks Sara :)

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

The topic ‘Footer Not Stretching’ is closed to new replies.