Lock footer a specific height above the bottom of every browser size.

Site URL: http://alexgale.co.uk/

Hi,

I'm looking to choose a specific height to lock my footer bar just above the bottom of every size of web browser. The desired distance between my footer and the bottom of my browser is perfect when viewing on my 16" Macbook pro. But when viewing on my 24" monitor the footer jumps up as well on smaller displays disappearing entirely. See attached a screen shot for both 16" Macbook Pro footer position (Green Tick) and 25" monitor position (Red Cross).

The footer is fine for the mobile version!

The issue refers to the main content of my site and not the initial landing page that last for a few seconds.

Thanks!

It is a bit complex because of how that template is structured, but I think this CSS should do it. It will keep the footer at the bottom of the page.

Check all of your pages to make sure this doesn't mess anything up. I only wrote this for the main page. 

#canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

#pageWrapper, #page {
  flex: 1;
  display: inherit;
  flex-direction: inherit;
}

#footerWrapper {
  margin-top: auto;
}

Hi Chris,

Thank you so much - that worked perfectly!

I just had to remove the space under the gallery content from each page to avoid footer height fluctuation.

Really appreciate the help!

Hi Chris,

I actually just noticed that the mobile version of the site is effected by this CSS. The footer information bar previously targeted by your code is now not visible without scrolling down on iPhone, is there anyway to avoid the mobile site being effected?

Thanks!

Alex

Try this:
@media screen and (min-width: 641px) {
#canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

#pageWrapper, #page {
  flex: 1;
  display: inherit;
  flex-direction: inherit;
}

#footerWrapper {
  margin-top: auto;
 }
}

Hi Chris,

Thanks for your response. Unfortunately the mobile site still has the issue, anymore ideas?

Cheers,

Alex

It looks like you have both CSS snippets I sent on your site still. 

You should only have the updated one. The updated one will only apply to screen sizes larger than mobile. I have updated the media query below. Remove everything I sent before and only paste in this snippet:

@media screen and (min-width: 801px) {
#canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

#pageWrapper, #page {
  flex: 1;
  display: inherit;
  flex-direction: inherit;
}

#footerWrapper {
  margin-top: auto;
 }
}

Hi Chris,

Ah perfect - I think that did the trick!

Thank you very much for your help!

Cheers,