Support » Theme: Pinnacle » Make footer fixed to the bottom of the page

  • mirageborska

    (@mirageborska)


    So I have a contact page that is short and therefore it makes my footer to appear in the middle of the browser window (on dekstop). I would like to push it to the bottom. I found some solutions but I cannot make it work.

    I tried adding this CSS (found here https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page). It worked on the contact page but then on other pages (like home page) the footer is in the middle of content.

    #containerfooter {
    position: absolute;
    height: 120px;
    width: 100%;
    bottom: 0px;
    }

    html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }

    #container {
    min-height:100%;
    position:relative;
    }

    I am not sure if my page has “container” id somewhere. Maybe I need to replace it in css with some other id?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • AddWeb Solution Pvt. Ltd.

    (@addweb-solution-pvt-ltd)

    Hello @mirageborska,

    Add below CSS code into your current active child theme’s style.css file or you can add additional CSS option in theme customizer.

    .footerclass {
      background-color: #eeeeee;
      position: fixed;
      top: auto;
      bottom: 0;
      width: 100%;
      display: inline-block;
    }
    Kevin

    (@jx-3p)

    That CSS seems good! I suggest adding to Theme Options> Custom CSS. That way you wont need to use a child theme if you aren’t already.

    -Kevin

    mirageborska

    (@mirageborska)

    @addweb-solution-pvt-ltd . thanks but this is not the effect I want to achieve. I don’t want the footer to be fixed to the bottom and “float”. I actually want to push it it the bottom only if the page is very short and it makes the footer to be displayed in the middle of the browser viewport. Like on my contact page.

    πŸ™‚

    mirageborska

    (@mirageborska)

    @jx-3p,

    thanks for your reply. I don’t have child’s theme so I always add code to Custom CSS. But this code does not work as I want it. It pushes the footer on Contact page to the bottom (what I wanted) but on other pages it shows footer on the same height as on Contact, which makes this footer be on top of other content and just stuck in the middle of nowhere on all the other (longer) pages. πŸ™

    hannah

    (@hannahritner)

    Hi @mirageborska,
    Try adding this css:

    @media (min-width: 992px) {
    html, body {
    height: 100%;
    }
    html body.wide #wrapper.container {
    min-height: 100%;
    position: relative;
    padding-bottom: 182px !important;
    }
    #containerfooter {position: absolute;bottom:0;width: 100%;}
    }
    body {
        background: #f9f9f9;
    }

    Does that work for you?

    Hannah

    Kevin

    (@jx-3p)

    Try this CSS instead:

    @media (min-width: 992px) {
    html, body {
    height: 100%;
    }
    html body.wide #wrapper.container {
    min-height: 100%;
    position: relative;
    padding-bottom: 101px !important;
    }
    #containerfooter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    }
    }

    let me know if that works for you!

    -Kevin

    mirageborska

    (@mirageborska)

    @jx-3p, @hannahritner

    thank you both. It worked! The padding-bottom is actually not needed (when I used it it made me a space above footer on home page). Without it it works perfectly, plus I didn’t need to change body colour.

    You are awesome! πŸ™‚

    hannah

    (@hannahritner)

    Glad that worked for you!

    Hannah

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Make footer fixed to the bottom of the page’ is closed to new replies.