[stefanie2]

Dear Theme Horse Team,
I basically have the same problem as in this post, but the proposed solution yields strange results.
The page currently looks like this. Here is a link to the site by the way. For pages with short content the footer is not at the bottom of the page. I would like to have it at the bottom.
When I apply your solution:

html,
body {
   height:100%;
}
.wrapper {
   min-height:100%;
   position:relative;
}
#colophon {
   position:absolute;
   bottom:0;
   width:100%;
}

The footer is put to the bottom but two problems appear. For long pages the content of the page is cut off like seen here. And for short pages the space between the content and the footer does not have the background color like seen here. Also this solution always shows the footer which covers a lot of the screen on mobile devices.
Could you please provide a solution to put the footer to the bottom without these side effects?

Thanks a lot
Stefanie

[Theme Horse Support Team]

@stefanie2

Add below custom css with the above one which will not hide your footer content and background color will be fixed too.

#main {
    padding-bottom: 134px;
    background-color: #fdf5e6;
}

Thank you!

[stefanie2]

Thank you so much for the quick reply. It works like a charm except for one last detail.
When viewing the page on mobile the footer is at the correct position but it cuts off some of the side bar content. You can see it happen in this screenshot. Could you provide a solution that displays all of the content like seen here?
Thank you very much!
Stefanie

[Theme Horse Support Team]

Hi Stefanie,

Oh! Sorry forget to add the CSS for mobile devices. Please add below custom css.

@media only screen and (max-width: 767px) {
    #main {
        padding-bottom: 212px;
    }
}

Thank you!

[Author]

Posts