reCAPTCHA problem on mobile

Hi @tarayfg,

No one else has reported this issue but I understand what you’re saying. Because themes and styles vary so much from site to site it’s hard for me to test this on my own. Would you mind setting up a password protected page (or any page/post that is not easily accessed on your site) and putting the form with the captcha on there? That way I can access it on mobile, view the issue, and hopefully provide custom CSS that can tweak the styles and make it usable on mobile.

You can enable/disable the reCAPTCHA via the shortcode – that way you can enable it on the ‘private’ form while keeping it off of the current/public form. The shortcode attribute is captcha="0" to disable it.

Let me know if you can do that.

Cheers,
Kevin.

Hi @tarayfg,

I figured it out!

The recaptcha is in an iframe and your theme is defining a height on iframes that is a lot taller than the recaptcha box. It does it even worse on desktop, but the button is so wide there is still a large clickable portion (try clicking the left end of the button).

This CSS code should fix it for you on all screen widths:

.singlePostWrap .g-recaptcha iframe {
    height: 76px;
}

You have a few options to add CSS code:

• If you’re using WordPress 4.7 or higher, you can go to Appearance > Customize > Additional CSS and place the code there.
• If you created this theme yourself, you can just add it to your style.css file
• If you’re using a theme you downloaded or bought you can make a child theme and add the code to your child theme’s style.css file
• Your theme may have a “Custom CSS” option. If it does, then you can just pop it in there.
• You can use a plugin like Simple Custom CSS or Jetpack and enter the code in their Custom CSS area

Thank you!
-Tracy