Moving footer to bottom of page


#1

Hi
I’m trying to have the footer displaying on the bottom of the screen.
My site have nature background images, and on pages with just a little text, the footer is a black bar in the middle of the picture…

Can easily be seen on this page: http://www.tantrakontakt.dk/links/

Please advice, and thanks for an otherwise beautiful theme :slight_smile:

Br
Kasper


#2

Hello there,

Thank you for reporting.

I thought that it happens because the content of the Links page is too short. It makes the footer won’t touch the bottom of the screen. Try to edit your Links page, then add more spaces at the bottom. Just hit the enter/return key several times.

I hope this reply helps.

Warmest regards,
Kharis


#3

Hi Kaharis
Thanks, that will work for sure - I also experimented with adding white gif’s 1x400 px which worked fine as well.

But - I would love to know a way of letting the footer ‘float’ to the bottom of what-ever screen it was displayed on. Cause when adding breaks or gif’s it will force the footer to far down on some screens.
Hope that make sense :slight_smile:
Br
Kasper


#4

Hello there,

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

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

Let me know how it works for you. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#5

Hi :slight_smile:

That makes the footer glued to the bottom of the screen - much better than before for sure.

But - the footer is not a footer anymore - it will display on the bottom of the screen, also on the long pages…

Have a look at the frontpage http://www.tantrakontakt.dk - or this one where the footer will now cover the text… http://www.tantrakontakt.dk/om-tantra/

Thanks - and maybe you have another idea? :wink:


#6

Hello there,

Thank you for reporting. What about trying to implement the previous CSS code to the “Links” page only? Its ID is 178. So, the code should be like the following.

@media only screen and (min-width: 601px){
   .page-id-178 .site-footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
   } 
}

Let me know how it goes.

Warmest regards,
Kharis


#7

Hi Kharis
Spot on :smiley:
That did the job, I’ll add the code for any short pages.

Thanks for your swift and effective assistance.

Br
Kasper

And BTW - we should change the title of this topic to "Move footer to bottom of page… Can you do that?


#8

Dear Kasper,

I’m glad to hear that works for you.

I’m happy to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis