Fixing Footer on Mobil

Site URL: https://paddlefish-red-zy7l.squarespace.com/

My footer on mobile site isn't looking great. For some reason the right hand text box is sitting vertical on top of the left hand text box on desktop but now that the mobile info bar is enabled I think it would be best to remove the red footer on mobile completely as when you are scrolled right to the bottom and click the hamburger menu it overlaps. 

What is a code to hide the footer on mobile devices only?

Add to Home > Design > Custom CSS

/* Hide mobile footer */
@media screen and (max-width:767px) {
footer.sections {
    display: none;
}
}