stack footer in mobile

Site URL: https://www.cattlebranddesign.com/

I have made a landing page and a contact form. On the landing page  ( https://www.cattlebranddesign.com/ ) 
I have added this code to shrink the banner image to fit a mobile screen
@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

The footer is fine when you go into my contact form.  ( https://www.cattlebranddesign.com/contact )
But it seems as though this code has messed up the footer on my landing page. 


It seems as though this is what has messed up my footer.  on this page  ( https://www.cattlebranddesign.com/ ) 
Any help appreciated

I figured it out. I had the height of the section set as
"  height: 30vh !important; "
I had to make it larger and it was all good, I swapped it to 
 

"  height: 80vh !important; "

section:first-child = first section on Main Content + first section on Footer

You should change it to

@media screen and (max-width:767px) {
.homepage article section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}

(this code will target first section on Homepage Main Content Only)