[SOLVED] issues with mobile friendly test

colak · 2020-02-28 14:23:06

I am checking google’s mobile friendly test and I am having issues with some urls but I just cannot figure out way. Sample url: http://www.neme.org/projects/state-machines/self-as-actor

The url validates, the css seems perfectly OK, and it looks just fine on my mobile. The test does not for some reason load the css, finds ‘Text too small to read’ and ‘Clickable elements too close together.’ I take it that the last two reasons is because it does not load the css. Interestingly the same page gets 100% on the pagespeed test.

Can anyone actually spot the issue or is it just another one of those google bugs?

colak · 2020-02-28 16:37:25

Instead of editing. The reason I am looking into this is because google no longer lists pages with issues in their results.

Bloke · 2020-02-28 16:47:16

colak wrote #321990:

google no longer lists pages with issues in their results.

That’s a bit militant! Won’t that eradicate half the world’s internet sites from their search results? Guess they need the server space :)

colak · 2020-02-28 17:02:45

Bloke wrote #321991:

That’s a bit militant!

Tell me about it!

Vienuolis · 2020-02-28 20:02:51

Would not your robots.txt prevent Googlebot to access CSS file from /themes?

Vienuolis · 2020-02-28 20:30:49

Google’s Blink Development Tolls shows your webpage almost half-widht of the screen and with small fonts in mobile mode, too. I can not still find where is that statement of <body> and @media in your default.css, sorry.

bici · 2020-02-28 21:50:21

I checked by typing in bopjet.com. The test site assumed http://

then replied with :

Mixed Content: The page at 'https://bopjet.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'. This request has been blocked; the content must be served over HTTPS.

why didn’t google redirect http to https/

jakob · 2020-02-28 22:13:54

bici wrote #321996:

Mixed Content: The page at ‘https://bopjet.com/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800’. This request has been blocked; the content must be served over HTTPS.

I get that in the console too with your site. You just need to change the two lines you have in your <head> area to use https://… and that will be resolved for you.

Vienuolis wrote #321995:

Google’s Blink Development Tolls shows your webpage almost half-widht of the screen and with small fonts in mobile mode, too. I can not still find where is that statement of <body> and @media in your default.css, sorry.

Maybe you didn’t see it because the code has been compacted with pat_speeder but the body tag is there, and there are @media directives in the stylesheet. Or maybe I misunderstood you.

@Yiannis: I can’t see what you might have done wrong either. At the top left of the google test page, I do get a page load error message. If you click on that, it shows different messages each time. What I saw most often was a thumbnail image and jQuery not loading, though it is there if you enter the url to the asset manually (no idea why it’s not loading when other assets are). The jQuery’s not in your theme folder either.

But maybe – very wild (untested) guess here – if jQuery is not loading properly, then a script such as the slider, might not be adding the classes/nodes as it should and your css may therefore not be constraining the content as it should. If the slider script has a wide “track” that it slides back and forth within a window, that might be making your wide window. Then again, if your slider / cycles images in z-index from back to front, then my guess is wrong.
Hmm, I tried loading your page with javascript turned off and it seemed okay at all widths, so that’s not likely to be the answer.

phiw13 · 2020-02-29 01:09:03

colak wrote #321983:

I am checking google’s mobile friendly test and I am having issues with some urls but I just cannot figure out way. Sample url: http://www.neme.org/projects/state-machines/self-as-actor

The url validates, the css seems perfectly OK, and it looks just fine on my mobile. The test does not for some reason load the css, finds ‘Text too small to read’ and ‘Clickable elements too close together.’ I take it that the last two reasons is because it does not load the css. Interestingly the same page gets 100% on the pagespeed test.

Can anyone actually spot the issue or is it just another one of those google bugs?

I have no idea why that google smartphone displays that way. All your stylesheets are loaded according to that console. Hmm wait – it does not list default.css. Odd, as that stylesheet or part of it is definitely applied to the page.

Edit: as much as I tried to find something that would tell the page to shrink to accommodate something wider that the <body /> width, I had no success.

If it is any consolation, that page displays fine on iPhones and a recent Huawei Android. And also, another consolation, I just tested a page I recently coded for a client, that search console is happy with the page, except some resources (images) could not loaded. Freaky, as one of the images is absolutely visible in the provided screenshot.

colak wrote #321990:

Instead of editing. The reason I am looking into this is because google no longer lists pages with issues in their results.

Is that? That is pretty disgusting, borderline fascist. Everything in the wallet garden of AMP junk, so that we can track you better.

(some story by the brothers Grimm are relevant here…)

Last edited by phiw13 (2020-02-29 01:21:49)

colak · 2020-02-29 07:20:02

Thank you all for testing.

Vienuolis wrote #321994:

Would not your robots.txt prevent Googlebot to access CSS file from /themes?

No, I disallow access to some bad bots but not goggle… just yet.

Vienuolis wrote #321995:

Google’s Blink Development Tolls shows your webpage almost half-widht of the screen and with small fonts in mobile mode, too.

I know! I also have a simple stylesheet enclosed in the act_if_mobile tag which contains

.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}
.embed-container embed,.embed-container iframe,.embed-container object{position:absolute;top:0;left:0;width:100%;height:100%}
.vids {display:block; padding-bottom:40%}
body{font-size:1.2em;line-height:1.5em;font-family:'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}

Just for some mobile specific rules.

jakob wrote #321997:

@Yiannis: I can’t see what you might have done wrong either. At the top left of the google test page, I do get a page load error message. If you click on that, it shows different messages each time. What I saw most often was a thumbnail image and jQuery not loading, though it is there if you enter the url to the asset manually (no idea why it’s not loading when other assets are).

I saw that too. Considering that most other pages in that section load just fine, (another 2 do not), I am totally lost.

The jQuery’s not in your theme folder either.

The large js scripts are in a /js/ directory at the root of the site as I do not want to delete them by mistake when I am updating the themes.

Hmm, I tried loading your page with javascript turned off and it seemed okay at all widths, so that’s not likely to be the answer.

Yep, The default body class is no-js. I have a short js script that changes it when js is enabled.
p.

phiw13 wrote #321998:

I have no idea why that google smartphone displays that way. All your stylesheets are loaded according to that console. Hmm wait – it does not list default.css. Odd, as that stylesheet or part of it is definitely applied to the page.

indeed and the stylesheet loads for most articles in the section.

Edit: as much as I tried to find something that would tell the page to shrink to accommodate something wider that the <body /> width, I had no success.

Same here

If it is any consolation, that page displays fine on iPhones and a recent Huawei Android. And also, another consolation, I just tested a page I recently coded for a client, that search console is happy with the page, except some resources (images) could not loaded. Freaky, as one of the images is absolutely visible in the provided screenshot.

thanks for testing. It loads OK on my iphone7. I normally check pages on mobilemoxie.com/tools/mobile-page-test/ for other devices.

Is that? That is pretty disgusting, borderline fascist. Everything in the wallet garden of AMP junk, so that we can track you better.

(some story by the brothers Grimm are relevant here…)

They are hiding behind their mobile first accessibility directive.

jakob · 2020-02-29 16:44:20

One thing I did notice with neme.org on a mobile is that if you wiggle a little left and right with your thumb/finger the whole website shifts, which most sites don’t. So maybe you have something that’s a little wider than 100% or need to limit scroll to vertical only.

colak · 2020-02-29 17:31:01

Hi Julian. I am experiencing it too and trying to find a solution. I’ve made widths to 98% but that did not help.

I am currently also trying to solve an issue appearing on small screens when the title is too long (example: http://www.neme.org/texts/environmental-awareness) where the h1 covers part of the body of the article. I even created a clear both span to no avail.

Although the changes to the previous version of the site are mostly on the templates rather than the styling, I do not remember those bugs then.

I will need to audit the css, something I am dreading as its content grew organically over the past 17 years.

Textpattern CMS

Textpattern CMS support forum

#1 2020-02-28 14:23:06