Sticky footer

Hi Support,

How can I make the footer sticky, so the footer is always present at the bottom of the viewport and how can I change the fontsize as well?

See: www.janzaal.nl/vvt

Your support will be highly appreciated.

Hi there,

Please try this CSS code below:

.site-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
}

Regards,
Awan

Thanks Awan,

This works perfect.

Hi Awan,

Sticky footer on desk top is perfect but it will be better to make the footer on mobile NOT sticky. Is that possible?

Hi,

Please try to replace the code in above with this:

@media and only screen(min-width: 991px){
  .site-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
  }
}

Regards,
Awan

Sorry Awan but this code does not work right. The footer is no longer sticky on the desktop viewport.

Ah my fault, I am sorry… there was typo on the last code in above. please try this instead:

@media only screen and (min-width: 991px){ 
  .site-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
  }
}

Thanks Awan,

Works perfect.

Have a nice day.

Hi Awan,

I have changed the content of the footer and the CSS code for the sticky footer does not work anymore.

@media only screen and (min-width: 991px){
.site-footer {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
}
}

How can I fix this?