Edit footer position on individual pages

[Ghea]

Hi there,

I’m having a bit of trouble with the footer on my website. It’s floating in the middle of the screen on pages with a small amount of content (only the “my account” page) and looks very out of place (see first screenshot). I have searched through all the other posts about making the footer stick to the bottom of the page and tried applying the following CSS code that I found there:

footer.x-colophon {
position: fixed;
width: 100%;
bottom: 0;
}

This fixed the footer on the “my account” page to the bottom, and it does what I wanted (see second screenshot). However, being global CSS, it also affected every other page in the way that it fixed the footer to the bottom of the screen instead of appearing only at the bottom of the page content - and for some reason, all of the page content now overlaps the footer and cuts off the bottom of the content (see third screenshot).

What I want to know is if there is a way to apply this shortcode to only the “my account” page? But even then, it works great on the “dashboard” section but overlaps the content on the “account details” sub-page of “my account”… What can we do here? Or am I stuck with the footer floating in the middle of pages with little content so it functions normally on all other pages?

Thanks in advance
Tom

[paul.r]

Hi Tom,

You can try this code instead.

.entry-wrap {
    min-height: calc(100vh - 100px);
}

Replace 100px with header height + footer height + padding top and padding bottom of your container offset

Hope that helps.

[Ghea]

Hey Paul,

That code worked great but messed up how my products were appearing on the shop and home pages so I just specified the page id of the ‘my account’ page to apply it to that page only and everything was fine.

Thanks very much for the help!
Tom

[jade]

You’re most welcome, Tom.