[Resolved] White Space Below Footer on one page

[Leanne]

Hi
I recently contacted you about making the main page of this website https://lnftwd.com/ fit without scrolling on all devices. It worked thank you.

Now I have another problem. On this page: https://lnftwd.com/projects/ when you click on some of the tabs (like commercial or one of the others) and you scroll down there is white space below the footer. I tried putting more white space above the footer but the white space below the footer does not go away.

Can you help me with this?

Thanks,
Leanne

[David]

The very last element in the page builder has some bottom margin – i am not sure if thats editable in the builder. This is the CSS if you want to remove it, but not sure if this will effect other elements.

.wpb_text_column.wpb_content_element {
    margin-bottom: 0;
}

With that gone you can remove the negative margin CSS you have on the footer.

[Leanne]

That did not work. I have a large blank space at the bottom of the page to try to correct the problem. When I remove it, the page has white space below on all tabs.

when I remove the code that you gave me for the front page, it puts white space at the bottom of the main page. So, we need that code.

the new code does not seem to do anything.

Any suggestions.

[Leanne]

Could it be a problem with the portfolio plugin?

[David]

So the footer rises up because of the short content on the page.
Will you be adding any more content to that particular page?

[Leanne]

Hi,
I really do not want any other content on the page. However, to see if that would help, I added a bunch of text. I am still getting white space on my 28″ screen.

Also, for some reason the foot on all pages except the main page has now doubled in size.

Can you help me fix both of these issues.

Thank you.

[David]

Hmmm looks like the portfolio block is effecting the size of the viewport – i can’t see an easy solution to this – could you speak to the plugin author?

[Leanne]

I sent a support request to the author of the plugin 3 weeks ago and have yet to hear back from them. I could try another plugin.

In the mean time can you help me fix the footer. For some reason the footer on all pages (except the main page) has now doubled in size. It was not like that a few days ago. I don’t know what happened.

Thanks

[David]

I can’t tell if the footer ( Copyright info ) is the incorrect size, if i check the site it is only 54px hight, which is around the default size.
You do have the CSS that is apply negative top margin and pulling the footer up thought. But it looks fine to me. Let me know

[Leanne]

Hi

About 4 days ago, Leo asked me to put this code on the website:
.site-footer {
margin-top: -53px;
position: relative;
}
This was to make the main page display without scrolling. It works fine. The footer displayed about 55px on all pages.

However, If you look at the footer on the main page it is about 55px, and on all other pages it is twice as high. It was not like this yesterday. It is like that now. I did not change anything to do with the footer.

How can I make the footer the same height on all pages.

Thanks

[Tom]

You could try this instead:

.site-footer {
    top: -53px;
    position: relative;
}

What exactly was the purpose of that CSS, though?

[Leanne]

Sorry. That does not work. It does make the footer the correct size, but now there is white space below the footer.

Your developer Leo had me add that CSS to make the main page display without any white space below the footer, and so that there would be no scrolling on the main page on any device. It worked.

This new code of yours put white space below the footer, so it does not work.

Take a look.

Thanks

[Tom]

Got it. Try this instead:

.home .site-footer {
    margin-top: -53px;
    position: relative;
}

[Leanne]

Yes! Fabulous. That worked great.

I love your support.

[Tom]

Awesome, glad we could help 🙂

[Author]

Posts