4

The mobile friendliness tester is saying that my text is too small, and that clickable elements are too close together. I ensured that ALL text on the page was above 18 font to test, and Google still said it was not mobile friendly.

I think there's an issue fetching the site properly. On my site, the "screenshot" section takes up less than half the mobile preview, while on the other site (which passes mobile friendliness) it takes up the full preview.

Image for reference of the narrowness: Note the "screenshot" section, the page loads very narrow.

The url is Chromatin.net, running on Wordpress with Astra theme and default editor.

All of the resources on the page were loaded successfully according to the "more info" section.

1
  • Maybe you need to post a minimal version of your css and html here Jul 17, 2022 at 0:56

1 Answer 1

3

I suspect that it is because your <body> element doesn't have a width set.

Try adding:

body {
    min-width: 100%;
}

If that doesn't change anything (despite poor it being poor practice):

body {
    min-width: 100% !important;
}

This is definitely a shot in the dark, but the way you solve this problem is by taking many shots in the dark until something works.

Look for things that don't have width applied, check your break points, make sure that the CSS box model isn't broken anywhere, and in general make sure your html is well formed (use the w3 validator).

You can see what is likely your issue by toggling between different devices in dev tools:

enter image description here

2
  • Thanks for the reply, I tried adding both of those and also adding to images and no luck unfortunately
    – Tman
    Jun 16, 2022 at 2:01
  • 1
    @Tman Sorry to hear that. Did you ever solve the problem? I added a bit to my answer. Jul 16, 2022 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.