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:

Google webmaster tools fetch option

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:

blocked resources

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:

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:

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.



  1. Gudtalent says:

    Thanks Mukesh for this wonderful post. It really helped me resolve the issue I have with my blog.

  2. AlreadyCoded says:

    I have also created a script to check mobile friendliness. It uses google API. take a look:

  3. Kumar says:

    Hi, Nice post.
    for me, the search console render and fetch says complete but still says content wider than the scree and click elements too close. But, no blocked resources as well. What is the problem? any help would be awesome.

  4. Thank you for this post (it's very good) it has helped me to troubleshoot, however I have the issue that the fetched and rendered smartphone views look good too! But Google is saying still "Content wider than screen" and "Clickable element too close together"
    So I am trying to understand what is going wrong!

  5. Jorge says:

    I have the same problem than Euan McMillan even when the site works correctly.

  6. John says:

    Thanks for your comprehensive explanations. I removed css from my robots.txt and Google Console is now happy. Nice tutorial.

  7. Afreen says:

    great post thank u so much finally i fixed my problem

  8. James says:

    does seem to do the trick. thanks

  9. Subash Krishnan says:

    This has worked for certain pages of my site. Thank you so much.

  10. Sneha Rao says:

    I am facing two problems "Content wider than screen" and "Clickable element too close together". I have a lots of pages with same layout with different text and only 3 pages having issue, any idea??

  11. Emma says:

    Thanks for this helpful post :)

  12. Siya Roy says:

    Thanks for sharing this post.
    I am facing the same problem, The search console show "Content Wider than Screen". I check my website in google mobile-friendly test then it is OK, there is no problem. But in search console the mobile usability errors increase day by day. So, what is the solution.


  13. Boniface says:

    Thanks for the post. I encountered the same issue in my site. Can image size cause it? Thanks.

  14. Matt Tutt says:

    I'm having the same issue with blog posts I publish - I also think image size is the issue here, they're not resizing/adapting for mobile users (including Googlebot).

  15. hiphopza says:

    Just got the same message from google, but my site is responsive

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.