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 8 months, 2 weeks ago.

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

    PhilMurray
    Participant
    Post count: 69

    hi

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

    [if you look at http://www.masters.com 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?

    thanks

    Phil

    #35052

    David Chu
    Participant
    Post count: 1371

    Hi,
    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.

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

    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

    #89235

    Simon Abramson
    Member
    Post count: 8

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

    http://my.studiopress.com/docs/genesis-markup-comparison/

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

You must be logged in to reply to this topic.