Mobile Site of WordPress Theme Not Loading?

Fix WordPress mobile theme showing gibberish by disabling Jetpack’s mobile site feature, which overrides custom theme templates on mobile devices.

From the Archive

Originally published in 2015 on talvinder.com. Some technical details may be outdated, but this remains here as part of the archive.

If your custom WordPress theme renders correctly on desktop but shows garbled, unstyled content on mobile devices, Jetpack is likely the culprit — even if the problem looks theme-specific on the surface.

Problem: The site was loading some gibberish on mobile devices, instead of the beautiful mobile responsive version of the wordpress theme.

I looked around a lot but couldn’t find any good answers, since on the surface it seemed like a theme specific issue. So I decided to dig deeper and the solution was pretty straightforward.

Investigation: Issue was caused by jetpack plugin. In an attempt to load a simpler-faster mobile site, jetpack ends up loading a “different” custom mobile site, which doesn’t use the custom wordpress theme templates. Since, most custom themes have custom tags etc, it appears as gibberish.

Solution: Login to wordpress admin panel. Navigate to jetpack > settings. Scroll down to find mobile site. Hover on it and click on deactivate.

That’s it. Your custom wordpress theme will load just fine on mobile devices!

Merry christmas folks!