Keep Footer at Bottom of viewable screen

Community Forums Forums Design Tips and Tricks Keep Footer at Bottom of viewable screen

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  Simon Abramson 1 year, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #35006



    How can i keep the footer always fixed to the bottom of the device screen in my genesis child theme?

    [if you look at you can see the footer always remains at the bottom of the viewable screen]  i am sure this can be done for a child theme — anyone know how?




    David Chu

    That’s a CSS question, not really a Genesis one. But I can give you a head start. Here is the CSS for their footer. The key ingredients that you need to know are “position: fixed”, “left”, and “bottom”, which interact to stick that to the bottom. You can apply similar ideas to the Genesis footer CSS code in style.css. When you use these, you’ll obviously need to adjust them to taste.

    #footer {
      background-color: #000000;
      border-top: 1px solid #2B2B2B;
      bottom: 0;
      height: 36px;
      left: 0;
      position: fixed;
      width: 100%;
      z-index: 11;

    I give the site demerits for hitting you with audio when you get there. :-) Also, the sticky footer as coded like the above should work fine, but if the visitor has a computer that’s not very tall, like a laptop, and the page content is long, the bottom of the content will go below the sticky footer. This is a much more complex CSS situation, and well beyond the scope of a forum post here.

    Good luck, Dave

    Dave Chu · Custom WordPress Developer – likes collaborating with Designers


    Simon Abramson

    NOTE: #footer is now .site-footer in Genesis themes using HTML5:

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

You must be logged in to reply to this topic.