Code injection not working because of Ajax loading

Site URL: http://adamcale.co.uk

Hello,

I had a few pages on my site where the footer was floating as the content didn't fill the page (past/present/future pages).

I added the following code to these pages to fix the footer to the bottom.

<style>
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>

Whilst this works in the Squaraspace builder it doesn't work on the live site because of ajax loading. 

Is there any way to override ajax for just these pages? Or is there a better piece of code i can use across the whole site?

If i use the current code for the whole site then the footer locks to the bottom of the window and sits on top of my content rather than below it - which i don't want.

Any help would be much appreciated, Thanks

Disclaimer: my coding knowledge only goes as far as google > copy > paste.

Hey @Ad-Cale, AJAX loading shouldn't affect custom CSS, that would be more likely to affect Code Injection. 

Where did you add your CSS?

I had a few pages on my site where the footer was floating as the content didn't fill the page (past/present/future pages).

Which pages? Can you share link? We can convert <style> code to Custom CSS code, & it will work.

Hey, Thanks for your responses

Its the following pages:

http://adamcale.co.uk/past

http://adamcale.co.uk/present

http://adamcale.co.uk/future

And i'd added the CSS into the header code injection for each page – maybe not the right place?

Add to Home > Design > Custom CSS

body#collection-55bfcd2de4b0b2820129f308, body#collection-55bfdacbe4b003159a83691f, body#collection-55bfe0dae4b0a85e3942878b {
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
}

Perfect, Thanks so much!