Footer moving to to centre of page in mobile browser view - happens on certain pages in V7.1

Site URL: https://www.nat-sui.com/work

Hello, Can someone plz help me with a little issue I'm having regarding the FOOTER IN MOBILE VIEW, version v7.1? 

Instead of being locked to the bottom of the page, the footer is appearing in the middle of the page, partially obscured by my image galleries (image below) OR its dissappearing altogether. It works fine on desktop and tablet.

This only appears to be happening on a 3 of my pages (https://www.nat-sui.com/work & https://www.nat-sui.com/work2 & https://www.nat-sui.com/shrine) which suspiciously are the only ones featuring a custom 'Masonry Grid layout' (adjusted for single column viewing on mobile). Iv'e pasted the code injected into the HOME/DESIGN/CUSTOM CSS below in case its helpful. 

Im truly out of my depth,  all I know about CSS is from Google, would love some help with this, thanks.

CSS used to make masonry gallery appear as single column in mobile browser:

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        transform: unset !important;
        margin-bottom: 50px !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
}

Don't remove any code in your current code

Add this to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry {
    margin-left: 5vw;
    margin-right: 5vw;
}
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

Thank you so much for helping with this!!! It works perfectly :)))

PS. Sorry about the delayed reply, I never received a notification, I only just saw this! REALLY appreciate your help!