Fix Mobile Responsiveness Issue with W3 Total Cache Plugin

W3 total cache (W3TC) is a superior class caching solution for WordPress site owners at free of cost. The plugin offers exhaustive options which can boost your site’s performance. But the problem is that you need to understand what you are selecting and test your site to confirm the readability. Missing to do this will completely break your site and hurt the user experience though you will be seeing the high page speed score in tools like Google PageSpeed Insights.

W3TC and Mobile Responsiveness

One such a problem is that the site may loose its mobile responsiveness after enabling certain settings in W3TC plugin. You may not notice this when viewing the site in desktop but the sidebar and the content will be congested within the smaller width on the mobile devices. You can find the problem in one of the following ways:

  • Resize your browser horizontally reducing the width to the minimum.
  • If you are using Google Chrome then use “Developer Tools” option to toggle the display to mobile mode.
  • Simply view your site in any of the mobile devices like iPhone.
  • Use online mobile site viewers showing mobile screenshot like Google PageSpeed Insights tool or Google mobile friendly tester tool.

Ensure you are viewing the post / page with sidebar to see the issue.

How to Enable Mobile Responsiveness Back?

CSS Settings

The major reason for the mobile responsive issue is the CSS minification settings. W3TC offers two minify mode options – Auto and Manual. If you have selected Auto mode then change to Manual mode under “Performance > General Settings > Minify > Minify mode”.

Related:  Google AdSense Revenue Sharing Sites
Enable Manual CSS Minify in W3TC WordPress Plugin
Enable Manual CSS Minify in W3TC WordPress Plugin

Save settings and empty your cache before checking the site in mobile. It should mostly come back to normal responsive view.

If you are already set the minification in manual mode then check the CSS files added under “Minify > CSS > CSS file management”. Remove all theme CSS files from the list and check the site. You can enable one by one again if required to filter the root file causing the issue.

JavaScript

If manual CSS minification does not solve your problem then the next check is with JS minification. JS minification is one of the real headaches for site owners since it will frequently break the site. Disable JS minification and check the mobile responsiveness of the site.

Enable User Agent Groups

One other setting for mobile agents in W3TC is to enable mobile user agents to serve correct cached pages. If this is not enabled then the same desktop cache may be served to mobile bots as well causing issue. Enable all listed mobile bots listed under high and low group names under “User Agent Groups” tab and check your site again.

If you have found any other solution to enable mobile responsive back, let us know by commenting below.

Recommended Articles:

4 thoughts on “Fix Mobile Responsiveness Issue with W3 Total Cache Plugin”

Leave a Comment