• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

MINIMUM Theme: how to KEEP FOOTER DOWN on short pages

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › MINIMUM Theme: how to KEEP FOOTER DOWN on short pages

This topic is: not resolved

Tagged: browser bottom, footer, Minimum theme, page bottom

  • This topic has 4 replies, 2 voices, and was last updated 10 years, 1 month ago by bcoco.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 17, 2013 at 3:54 pm #51225
    LenaGV
    Member

    HELP: In Minimum Theme, I would like to keep the footer at the bottom of the browser for short pages, and to have it at the end of content for long pages.

    FOUND but NOT working: Among others, I found two almost identical suggestions that I can not make work; here is one of two links:

    IF you can make this solution work, LET ME know WHAT code you place WHERE (in what file and the exact place in the file).

    NOTE: I do NOT want a sticky footer -- it does not work well for all of my current and future pages.

    MY SITE: gordanavukovic.com
    (artist and information designer&usability)

    Thank you!

    http://gordanavukovic.com
    July 17, 2013 at 3:58 pm #51227
    LenaGV
    Member

    ADDITION:
    In "FOUND but NOT working" above, after submitting my question the link I included didn't show up...here it is again:
    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    LenaGV

    August 20, 2013 at 5:17 pm #57798
    bcoco
    Participant

    Hi Gordana,

    This worked for me, using Genesis 2 and it's HTML5 structure:

    
    /* Sticky Footer 
    ------------------------------------------------------------ */
    html,
    body {
       margin:0;
       padding:0;
       height:100%;
    }
    .site-container {
       min-height:100%;
       position:relative;
    }
    header {
       padding:10px;
    }
    #site-inner {
       padding:10px;
       padding-bottom:120px;   /* Height of the footer */
    }
    footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:120px;   /* Height of the footer */
    }
    
    August 21, 2013 at 9:08 am #57924
    bcoco
    Participant

    Oh, and if you’re still using the Genesis 1.x structure, then this also works (or did for me, but I haven't tested in on Minimum yet) :

    '/* Sticky Footer
    ------------------------------------------------------------ */
    html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    #wrap {
    min-height:100%;
    position:relative;
    }
    #header {
    padding: 10px;
    }
    #inner {
    padding: 10px;
    padding-bottom:120px; /* Height of the footer */
    }
    #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:120px; /* Height of the footer */
    }'

    note: you may have to play with the padding values for the header and inner divs, since they could be overwritten elsewhere in your css, or need to be

    Hope that helps!

    August 21, 2013 at 9:27 am #57937
    bcoco
    Participant

    Shoot, sorry - messed up the first one:

    #site-inner should be .site-inner (class, not id). My bad.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble