• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

How To Stick Your Footer To The Bottom Of The Screen

Both code snippets in this tutorial enable you to pin the footer of your site to the bottom of the viewport like this:

This prevents big gaps on pages with little or no content like this:

The example above was tested using the Lifestyle Pro child theme by StudioPress.

Here’s the CSS you can add to your child themes style.css file before the start of the Media Queries:

.site-container-wrap {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site-inner {
    flex: 1;
}

Source

Note : Both these solutions may or may not need modifying for use on other genesis or non genesis child themes.

Sticky Footer On Larger Screens Only

The following CSS kicks in at 800px and is tested using the Genesis Sample child theme.

Before

After

Here’s the CSS rules you can add to your style sheet.

@media only screen and (min-width: 800px) {
    
    .site-container {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -webkit-box;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        height: 100vh;
     }

     .site-inner {
        -ms-flex: 1;
       -webkit-flex: 1;
       -webkit-box-flex: 1;
       flex: 1;
       width: 100%;
       padding: 20px 0;
       word-wrap: break-word;
     }  

}

CSS isn’t the only way to add a sticky footer in Genesis. You can also use jQuery.

Lifestyle Pro Theme

Reader Interactions

Comments

  1. Tomas Risberg says

    November 20, 2017 at 2:35 pm

    Thanks for this code. I use the one for larger screens only. I found a problem using it with Firefox 57.0. The footer is viewing it in that browser pushed too far down.

    Log in to Reply
    • Tomas Risberg says

      November 21, 2017 at 9:54 am

      Today I also recognized that this sticky footer code doesn’t work with IE11.

      Log in to Reply
      • Brad Dalton says

        November 21, 2017 at 6:02 pm

        Internet Explorer has been replaced by Edge. The code works with all versions of Edge.

        Log in to Reply
      • Brad Dalton says

        November 23, 2017 at 11:28 pm

        Sorry but i don’t offer consulting services.

        What happens if you add the prefix
        display: -ms-flexbox;

        Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.