Multi-step form + featured image = Fail Mobile Friendly test

  • Resolved Matt Schofield

    (@mattschofield)


    2 years, 3 months ago

    Hi

    We’re using Astra theme (problem also exists with Twenty Twenty).

    If a page contains a featured image and within the content there is a multi-step donation form (via either shortcode or Donation Form block), the page fails Googles Mobile Friendly Test with the errors:

    Text too small to read
    Clickable Elements too close together

    Within the screenshot the test provides with the fail results, the Featured Image of the page will either not be rendered at all, or it will appear within the screenshot but too wide for the mobile viewport.

    The page renders (responsively) perfectly well on desktop and mobile (in real life) and the page and its contents (donation forms) function perfectly well. All our site images are delivered webp (Imagify). Developer console throws no notices or errors. The same pages, containing both a Featured Image and a Multi-step form, do pass Bings mobile friendly test, but… that’s Bing. We need to pass Googles Mobile Friendly Test. The Google fail is also intermittent. The page can fail Google mobile friendly test ten times in a row, and then pass it once, sometimes twice, and then return to failing the test again. The issue exists on both our Production site and our Stage. Not caching related (cached, cleared, deactivated, doesn’t change the result). I think maybe an iframe and page stylesheet clash but I’m at a dead end locating it.

    If we remove the Featured image from any page where a Multi-step donation form exists, the page passes Googles Mobile Friendly Test every time.

    Thanks for looking. I can provide links privately if useful.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Rick Alday

    (@mrdaro)

    Hi @mattschofield,

    Glad you reached out.
    I’m not familiar with Google’s Mobile Friendly Test or how it impacts a site but if there’s nothing technically wrong with the donation process I don’t know if there’s much we can do for you.

    If the tool is able to provide more details about which specific elements are “Text too small to read” and “Clickable Elements too close together” maybe we can do something about it with some custom CSS.

    If the problem is having a Feature Image on the page maybe removing the feature image will be enough.

    You can also try using a different donation form template such as Legacy or Classic.

    Plugin Support Rick Alday

    (@mrdaro)

    Hi there,

    Just checking in on this issue. Do you still need assistance here?

    If you still need help, reply and we’ll make sure everything is handled.

    Thread Starter Matt Schofield

    (@mattschofield)

    Hi Rick

    This is the Google Mobile Friendly Test – https://search.google.com/test/mobile-friendly

    It’s important for our pages that contain donation forms that they pass Googles mobile friendly test, which helps ensure the pages are indexed and promoted by Google to mobile devices.

    To pass the test, we’ve removed Featured Images from the pages that contain multi-step donation forms. But with this issue not being specific to just Astra (also happens in Twenty Twenty), and with likely all your customers wishing to have our Donations pages indexed and promoted as highly as possible by Google, it may be worth trying to nip this problem out. We’re unlikely the only customers using featured images on Donations pages. But… like I said, the pages that contained Featured Images and Multi-step forms rendered and functioned perfectly well on both mobile and desktop. It’s possible Googles test is tripping up on something and reporting a fail in error.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multi-step form + featured image = Fail Mobile Friendly test’ is closed to new replies.