Rectifying the Content Wider than Screen Error in Google's Mobile Friendly Test

Your wordpress blog is mobile friendly (or in other words fully responsive), and yet when you test your blog using Google's Mobile Friendly Test tool, you get 'Not Mobile-Friendly' message for some pages on your site and the reasons cited are as follows:

• Content wider than screen/Content not sized to viewport.
• Touch elements too close/Links too close together.

Let's see why this happens and how this can be rectified.

1.) Check to See if the Webpage in Question is Responsive

Mobile friendliness is not website specific but web page specific. Or in other words, even if the homepage and article pages of your blog are fully responsive, there is a possibility that your contact page might be unresponsive.

So start by testing the specific page which fails Google's mobile responsive test using an independent tool like the one offered by Responsinator. Just enter the URL of the page in the space provided and click enter to start the test. Check to see if the page is loading properly for all screen resolutions.

If your site fails this test for some resolutions, you might want to make changes to your CSS media queries to make your site responsive for all screen widths.

If your site passes this test then the only reason why it fails the Google mobile friendly test is that your site is blocking Googlebot from crawling some media files namely your Images, CSS and or Javascript files. The most likely culprit in this case is your root level or folder level Robots.txt file but in some cases there could also be errors in the .htaccess file that could prevent a bot from accessing files/folders.

Now let's see how this can be resolved by identifying and unblocking blocked resources.

2.) Use Google Webmaster Tools to Identify Blocked Resources

A simple way to identify resources that are being blocked is to use Google's Webmaster Tools.

To do this, Login to your Google Webmaster Tools and go to Crawl > Fetch as Google

Once here, enter the path to your page, select 'Smart-Phone' and then click on 'Fetch and Render' as shown in the image below:

If the status of the Fetch and Render shows 'partial' then it means that some resources on that particular page have been blocked from crawler access. To get a list of these blocked resources, click on the listing and you should be taken to a page with a list of blocked resources as shown in the image below:

Check to see if your root or folder level Robots.txt file or .htaccess file is blocking any of these resources and unblock them.

Alternative Method: Instead of checking page by page, you can get a list of all blocked resources by going to Google Index > Blocked Resources. Here are the steps to do this:

1. Login to your Google Webmaster Tools and go to Google Index > Blocked Resources.
2. Click on your website name under Host to be taken to a page with a list of all blocked resources.
3. Click on individual blocked resources to be taken to a list of pages using that blocked resource.
4. Click on any one page URL and then Click on 'Robots.txt Tester' in the following page.
5. The Robots.txt tester page should tell you what part of your Robots.txt file is blocking this resource.

3.) Edit Your Robots.txt File to Unblock Resources

Once you have identified the blocked resources, you need to now edit your Robots.txt file to unblock them.

On a general note, when it comes to wordpress, you need to ensure that your Robots.txt file is configured to allow bots from crawling the Uploads folder, CSS and Javascript files of the current theme and in some cases CSS and Javascript files loaded by some plugins.

So check to see if your Robots.txt file is blocking wp-contents folder. If that is the case, add the following to the top of your Robots.txt page right below User-agent*:

User-agent: *
Allow: /wp-content/uploads/
Allow: /wp-content/themes/

If you want to keep these resources blocked, you can consider only allowing Googlebot-Mobile to access required resources as follows:

User-agent:Googlebot-Mobile
Allow: /wp-content/uploads/
Allow: /wp-content/themes/

To be more specific you can allow access only to the Style and JS folders of certain plugins and the theme that you are using:

User-agent:Googlebot-Mobile
Allow: /wp-content/uploads/ # Allow image folder
Allow: /wp-content/themes/theme-name/styles/ # Allow theme styles
Allow: /wp-content/themes/theme-name/js/ # Allow theme javascripts
Allow: /wp-content/plugins/plugin-name/styles/ # Allow specific plugin styles

4.) Test After Removing Certain Page Functionalities

If the above solution does not work, try removing ads or other page functionalities like slider, image gallery etc. on your site.

If you are using plugins to add extra functionality to your site namely a gallery or a author box or social media links, make sure that these units are responsive. Also make sure that the CSS and JS for these plugins are accessible and are not blocked from crawlers.

Temporarily remove these functionalities and test your site. If the test passes, then these functionalities are responsible for causing the error.

Similarly remove any externally hosted resources present on your page and see if your page passes the test. If so, you will need to make those external resources responsive.