Google complains that text too small and elements too close together

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#112947 Google complains that text too small and elements too close together

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Saturday, 04 February 2023 12:22 GMT

Tuesday, 31 January 2023 03:34 GMT

okynnor

I'm using JCE with the TOC plugin.
When I try to submit the page to Google for crawling, it tells me that it has two issues for mobile site that prevents it from getting crawled:
1. the text is too small
2. clickable elements are too close together.

When I view the page, it looks ok under iPhone with Safari.

The page is https://www.forteinnovations.com/blog/cryptos/crypto-tax-canada-how-to-file-income-tax-guide.html

I'd like to know why Google is complaining and if you know how to address this issue? It's affecting this important page from getting indexed.

See attached screenshot.

Attachments

Tuesday, 31 January 2023 10:29 GMT

Ryan

The size of the text looks fine to me, but that report might suggest a more suitable text size. As for the Table of Contents list, you could add the following to your template stylesheet to increase the spacing between the items:


.mce-toc li {
  padding: 5px 0;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 01 February 2023 17:42 GMT

okynnor

Would it be possible to move the TOC to the top in mobile viewport? It seems counter intuitive that the TOC is currently at the bottom. 😉

SEcond question. Is it possible to add more spacing in each H2? It seems squished.

Edited by okynnor on 2023-02-01 17:43 GMT

Thursday, 02 February 2023 14:10 GMT

Ryan

Would it be possible to move the TOC to the top in mobile viewport? It seems counter intuitive that the TOC is currently at the bottom.

Add the following to your template stylesheet:


@media (max-width:640px) {
    .wf-columns-order-flip .wf-column:first-child {
        order: 1;
    }
}

then, in editor, click in the columns that contain the TOC and open the Columns dialog. Select wf-columns-order-flip from the Classes list and Update.

SEcond question. Is it possible to add more spacing in each H2? It seems squished.

Add the following to the template stylesheet:


.mce-toc h2 {
  margin: 0 0 1rem 0;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Saturday, 04 February 2023 02:49 GMT

okynnor

Thanks Ryan.

Lastly, I would like to know how code I would need to add in order to add more spacing above the H2, as shown in the attached screenshot.

The blue box above, can use more white space before the H2 tag.

May I ask how you determine how to target the right CSS element?

Attachments

Saturday, 04 February 2023 12:22 GMT

Ryan

In this instance you could try something like:


.wf-column h2[id] {
    margin: 1rem 0;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.