Trouble with mobile display

Hey friendly folks,

I’m building a website for the organisation I work for and learning as I go, so apologies if the backend is really messy.

My current focus is to make the site responsive and display well on mobile, but I’m having issues. Particularly with Facebook Messenger’s web browser.

Here’s how the home page displays on Chrome:

^ That’s how it should look.

Now here’s how it displays in the Messenger browser:

The image has disappeared and the text is misaligned. I don’t know what’s causing it since it’s displaying fine in my other mobile browser. It would be really frustrating if the whole site can’t display properly on things like that!

Any suggestions are so appreciated. Thanks team.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I should note I’m using Andriod.

It displays differently again on my husband’s iPhone in the Messenger browser: