[Resolved] positioning footer on short page with accordion

[Chris]

Hi,

Page url in private details

I do not have much content so the footer is half way up the page. If I try to position the footer at the bottom (either using VH for the content area or fixed position on the footer) it gets overlayed by the accordion on smaller screen sizes.

How can I make the footer sit at the bottom of the page and have it pushed down when the accordion opens.

Many thanks

Chris

[Ying]

Hi Chris,

Try this:

body.page-id-13797 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-id-13797 .site-footer {
    margin-top: auto;
}

[Chris]

Excellent – many thanks!

[Ying]

No problem 🙂

[Chris]

I spoke too soon…

The solution you gave works but it is not allowing the page to be full width – see url shared privately.

Many thanks

[Ying]

Try add this CSS as well:

body.page-id-13797.full-width-content .container.grid-container {
    margin-left: 0;
    margin-right: 0;
}

[Chris]

Great! Many thanks

[Ying]

No problem 🙂

[Author]

Posts