Why Does Google Mobile Test show this screenshot, and I can't replicate the Issue in Chrome?

Melody Scott
Melody Scott used Ask the Experts™
on
https://search.google.com/test/mobile-friendly?id=vrughLHv7-LfXilg5Zu_Ng  that test says the page isn't mobile friendly, and the screenshot shows this:


Capture.JPG
But I can't replicate that in Chrome. It looks fine in Chrome. How can I test and fix this issue? Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
New Note: I can replicate it on the Brave Browser's tools.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Notes on page explain clearly the problem...

1) Clickable elements too close together.

2) Text too small to read.

https://support.google.com/webmasters/answer/6352293 provides details about how to fix these problems.

Author

Commented:
Nope, you're not getting it. Please see the screenshot. The reason it thinks the elements are too close and text is too small is because it sees it as very very narrow.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi, David, I have another question open on this, phrased differently. It seems that (if we're right), one very small (200 and under) screen sizes, the site appears as it does on the google screenshot. I am trying a media query on my dev site,

@media only screen and (max-width: 200px) {

  body {
    width:125%;
  }

}
It seems to be working, I may try it on live soon. But as always, your knowledge and experience are welcome, if you have any comments or suggestions. thanks.

Author

Commented:
I tried this on live, but Google is still seeing it as no  mobile friendly. Does Google cache pages in this test?

Author

Commented:
Bing says it is mobile friendly. This page is mobile friendly
Viewport configured correctly
Page content fits device width
Text on the page is readable
Links and tap targets are sufficiently large and touch-friendly

So does the small seo tools test. But Google, in any browser I test, says nope, not mobile friendly, and shows that screenshot.

and worse, it shows it here:

Capture.JPG
Military Systems Equipment Specialist
Commented:
It doesn't feel mobile friendly when browsed from a PIxel 2XL.  Something strange about the width of the display.  Page is twice the width of my display until I scroll down to the What's Popular section, then the width corrects itself, and the logo at the top becomes centered again.  I'd look at that width issue as the starting point.  When the page is wider, the assumption would be that it's because of the width of the device browsing.  Doesn't seem to be detecting and/or adjusting to browser width properly on load.  There are several ways to adjust for that, but each depends on libraries in play, style sheet configurations, and business rules/decisions for interaction.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Visiting https://www.magickitchen.com looks to have exact 2x problems Google provides.

Carlos provides detail about this.

Likely, if you change top of page to match bottom of page (font size + item spacing), likely problem will clear.

Author

Commented:
Ok... but why are rest of pages ok? They have the exact same header and footer, they come from SSI.  

EG: https://www.magickitchen.com/contact.html

I agree that it's a width issue, I just can't see where it's coming from, only on this page. Thanks.

Meanwhile, they are not paying me through this weekend, so I'll look at comments again on Tuesday. Thanks for all your help.
Carlos DiazMilitary Systems Equipment Specialist

Commented:
Oh......
They're not paying us over the weekend either.  Let's keep this brief.  I don't have access to the back-end stuff, but maybe focus on "fa-events-icons-ready".  That seems to be tied to the issue.

Author

Commented:
Thanks! I know you guys don't get paid, I appreciate all the help!!

Author

Commented:
Hi, Carlos, where do you see fa-events-icons-ready? It's not a class on the page. It's not a class when I view generated source. Not sure what I'm looking for. Thanks.

Author

Commented:
Ok, I am trying a few things, If I take off the sections before the What's popular section, the page is accepted as mobile friendly. so Carlos is onto something. Will keep working at it.

Author

Commented:
I've narrowed it down. The problem seems to be in the How it Works section. This page is mobile friendly:  https://www.magickitchen.com/indextesting.html

So if anyone can help determine why that How it Works section is breaking the page, that would be great. See, a weekend away is good for brains like mine. You guys can work on this stuff all the time. I need time away. I hope you understand. I'll keep working to see if I can find this issue too. Thanks!

Author

Commented:
Ok, removing these classes fixes the problem:  animated bounceInDown

I'll close this ticket and open another to see if someone can help with that. Thanks for your help!

Author

Commented:
Awesome, as I said, you narrowed it down, and I was able to narrow it down further. I think the question I asked here is answered, thanks  for your help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial