Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Clickable Elements Too Close Together & Text too small too read

  • Hi all,

    I’ve been combing through past threads regarding folks who have had the same issue within GSC for mobile usability issues but I still cant quite pin down where exactly I can fix this issue. Right now, I have about 25 pages with this error in GSC.

    I read the following – https://docs.generatepress.com/article/text-too-small-to-read-and-clickable-elements-too-close-together/

    Everything looks entirely fine when I visit the pages myself from mobile. Before I provide more detail – the site is birdograph.com, hoping a quick glance for someone much smarter than I am will do the trick 🙂

    As for what I can uncover myself – I’m looking at a report in pagespeed insights, and it looks like this page in particular has an issue with tap targets in the table of contents: https://pagespeed.web.dev/analysis/https-birdograph-com-how-to-deter-birds-from-nesting-under-eaves/ksm4gge3uq?form_factor=mobile

    However, this page is also receiving the mobile usability error and does not have a table of contents: https://pagespeed.web.dev/analysis/https-birdograph-com-birds-in-new-york/o9pss9ykq2?form_factor=mobile

    For either (or both) of these pages, is there somewhere specific I can just update some kind of spacing?

    Not sure what exactly is the cause because as I stated before, all the pages with an error look just fine when I visit on mobile.

    Appreciate any help.

  • Hi there,

    Does the issue occur with all plugins disabled except for GP Premium and GenerateBlocks?

    Let me know 🙂

  • Hi Leo

    Yep – this has been the case for quite some time, regardless of plugins. I’ve just finally got around to really trying to fix it. What is most confusing to me is that many of these pages are almost identical, just with different articles. Some index with no issues, and some end up with these mobile errors.

  • Hmm I’m not sure unfortunatley.

    The documentation article provides all the advices that we have from the theme’s standpoint.

    I wouldn’t worry about the warnings too much though – we actually get it sometimes on our main site as well.

  • Will that cause indexing issues on mobile search results though?

  • I don’t believe so but I’m not an expert in this.

    In order to solve this, you’d have to go through each page and make some changes based on the recommendations that the tests provide:
    https://www.screencast.com/t/ISNLW8ghlTZ6

  • All good, thanks Leo. Is there anywhere in the theme that I could adjust the spacing or padding in between the overlapping targets? Specifically, for table of contents, but also for the search button and nav bar – that seems to come up on the reports as well when loading mobile

  • Is there anywhere in the theme that I could adjust the spacing or padding in between the overlapping targets? Specifically, for table of contents

    The TOC is from Rankmath so the theme wouldn’t have the customization option built-in.

    If you are using the Dynamic Typography:
    https://docs.generatepress.com/article/dynamic-typography-overview/

    Then you can try selecting Custom under Target Element with this CSS selector: .wp-block-rank-math-toc-block ul li
    Then try increasing the Line Height option.

    As for the Search and Hamburger toggle, I believe you can try increasing the mobile menu font size.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.