Gotcha of the Day: Google's Mobile Friendly Tool Ignores Responsive Design CSS

As a make-a-website-mobile-friendly project was winding down, I decided to pop over to Google's Mobile Friendly Test Tool to confirm what Firefox's Responsive Design Mode and my actual cell phone showed me: the site was ready for mobile use.

And of course, Google's Tool gave my work a big 'ol F-. It explained to me that the site was most certainly not mobile friendly and showed a screenshot as the evidence.

In Google's defense, the screenshot did show a pathetic mobile experience, as it showed the desktop site crammed into a tiny window; not at all what I intended.

And so began the anger and denial. The anger came from the Tool's lack of specific detail. How hard would it be to show me exactly what files Google was accessing and exactly what CSS was being applied? All I could find were links to general mobile design guidelines, not helpful.

The denial was just the classic developer response. Surely the tool was grabbing an outdated version of the page. I changed the HTML on the front page and hit refresh. D'oh, it showed the most recent change.

Surely the tool was refusing to pick up mobile.css. I hit refresh on the tool again and, D'oh, I watched in the access logs as it downloaded mobile.css.

Surely the tool was ignoring my @media screen directive within mobile.css. I added the rule:

 body {
   borer: 4px dashed purple;
 }

and hit refresh. D'oh, the tool gladly reran the test, showed me the ugly purple border *and* failed my work.

My phone and Firefox were showing the right version, but Google wasn't. What about another site? I bounced over to MobileTest.me and tried the site there. It showed up just like I wanted it to.

So odd, it was definitely Google's fault.

And then I looked at my specific CSS. The original site was coded years ago, back when the best practices of CSS were still in flux. The result was that I had to do some pretty creative things in mobile.css to undo the craziness in style.css. One unusual line of code was this guy:

  body {
   ...
   min-width: unset;
   ...
  }

I changed that to:

  body {
   ...
   min-width: 100%;
   ...
  }

And Bam!, Google's Mobile Tool showed me a nearly perfectly rendered mobile site. There was some funkiness in the header of the site, where the logo was getting overlapped with the site's tag line. But still, it was a huge improvement. I looked for more suspsicious CSS and made this change:

  #title {
    ...
    position: unset;
    ...
  }

to

  #title {
    ...
    position: static;
    ...
  }

And, problem solved!

So apparently Google's CSS handling is just a bit more restrictive than my mobile phone and Firefox's. Definitely something to keep in mind when trying to please Google's Mobile Friendly Tool and more importantly, the Googlebot, which no doubt uses the same logic.