• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home » How to add sticky footer to Genesis with flexbox

How to add sticky footer to Genesis with flexbox

/* Sticky Footer */

.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;
     min-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;
}

Filed Under: Free Tagged With: Genesis

About Gabor Flamich

I'm a web developer and designer based in Budapest, Hungary. In recent years, I've documented hundreds of solutions I came across during development. This site is an archive for useful code snippets on WordPress, Genesis Framework and WooCommerce. If You have any questions related to WordPress development, get in touch!

Reader Interactions

Comments

  1. AffiliateLabz says

    2020-02-23 at 14:21

    Great content! Super high-quality! Keep it up! 🙂

    Reply
  2. Ralph Soter says

    2020-03-10 at 12:07

    Awesome write-up. I am a regular visitor of your web site and appreciate you taking the time to maintain the nice site. I’ll be a regular visitor for a long time.

    Reply
  3. Gabor says

    2020-03-10 at 22:56

    Thank You, Ralph, I’m happy to hear that!

    Reply
  4. cbd says

    2020-03-16 at 04:13

    You actually make it seem so easy together with your presentation but I to find this topic to be actually
    one thing which I think I would never understand.

    It kind of feels too complicated and extremely vast for me.
    I’m taking a look forward on your subsequent publish, I’ll attempt to get the
    hold of it!

    Reply
  5. Jacquline Grosvenor says

    2020-04-02 at 12:08

    Greetings! I’ve been following your web site for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to mention keep up the good work!

    Reply
  6. Scot says

    2020-06-15 at 20:31

    I rem out the padding because it causes the content to go edge to edge with the new genesis sample theme.

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

    And now it works great.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved