strange mobile css behaviour

hi guys

ive posted my entire css sheet at

It seems some really odd behaviour is happening. My website loads fine on my desktop, laptop, and when using inspect element feature it appears fine in the chrome simulators.

How ever on my real devices it appears very differently. It is as if some css isn’t being applied.

I also have xcode which has a really good simulator for an iphone and it appears some css is failing to be applied from my sheet on that too.

I’m just wondering what maybe causing this. I have a feeling some kind of syntax on the media queries possibly?

It is really strange because when I go landscape on my phone the css that turns off the desktop background images fails to be applied and I see these background images appear. The css works on the device being portrait.

So I thought to myself okay lets do some debugging. I removed the css entirely that removes the backgrounds. And it appeared on my laptop just as I imagined. How ever on incognito browsing on my mobile device removning it had no impact.

I’m so confused now.

Maybe someone can advise what is wrong in my css. I’ve checked for missing brackets and can’t see any. If you view my site on a mobile device in landscape you can see on the food menu the annoying backgrounds appearing. So odd

I’ve been clearing cache on my mobile devices.

Css being used is at
https://pastebin.com/9WDHzbxT

Website link is at http://changosmicro.flywheelsites.com/