Footer is in the wrong place on mobile display

The website looks fine in desktop view but when I switch to mobile view the footer is at the top of the page and overlaps with other texts. Does anyone know how I can fix this? 

Have you edited the mobile layout of your website? It looks like you've left blocks overlapping in the mobile layout.

Can you share your website URL so I can check what's going on?

It's www.sydneycityhampers.com 

And thank you in advance 🙏

I'm not sure what's going on with your footer, but I can't see it on mobile screens, have you hidden it?

No I haven't. You can't see if at the footer section of the mobile screen but if you look closely it is overlapping with some of the products at the top of the page i.e. writing on writing as per screenshot above.

Okay, I've found the footer, it appears to be in the middle of the page below the main content (I could only see it by playing with your website in my browser).

Something appears to be going wrong with the code for the product section, but I'm not sure what that is specifically. I assume you got the code from SquareWesbites, does this problem go away if you remove the code? Have you edited the code in any way from how it was delivered?

I did buy a filter plugin from SquareWebsite, but I don't think that's the problem  because I tried removing the code and the footer is still in the wrong space 😞

Grateful that you're helping look into it though! Really thankful

I think you have some CSS, change first section height, caused problem. I used to see some same cases

If you share link to your site, we can check easier

Hi Tuan Phan, yep I shared the link above it's www.sydneycityhampers.com

It worked thank you so much for your help! 

I fixed the footer with your above solution. Another issue was: I created my banner as an 'intro' block rather than an 'image' block which caused sizing issues in mobile view.

Thanks again for your help!