reCaptcha Pro on Mobile – Verification Box Overflows Screen

Hello,

I have installed and paid for a license for the plugin “reCaptcha Pro by BestWebSoft”, which is currently active. Regarding the issue I’m about to describe, I initially submitted a ticket to their support team, and they referred me to you. The problem is as follows:

“On mobile devices, the reCaptcha verification box goes outside the boundaries of the screen. In other words, it’s not possible to complete the ‘I’m not a robot’ verification from a phone. I’m attaching a screenshot.”

After checking on their end, they replied with the following message:

“Hi,
Unfortunately, it’s not possible to change the size of the reCAPTCHA box itself. You can use your theme’s styles to align the block to the left so that the verification window fits the screen. Please note that we are not responsible for the fact that the reCAPTCHA box may be larger than a mobile screen. Sorry for the inconvenience.”

Please help me, because I have already paid for this plugin and I really need it one way or another. I’m attaching a screenshot so you can see how the verification window appears.

Attachments:

You must be logged in to view attached files.

Hello,

To better assist you, could you kindly test the functionality with default WordPress themes such as TwentyTwenty or WooCommerce Storefront? This will help us determine whether the issue stems from our theme or elsewhere.

Regards

Hello,

I changed the theme to TwentyTwenty, and there is no problem there. I’m attaching a screenshot. Please provide further assistance.

Upload Errors for previous comment. I am uploading here the image.

Attachments:

You must be logged in to view attached files.

Hello,

The problem is caused by the custom CSS code you added to your website. Once we comment out this code, the captcha works correctly. Check the screenshot https://monosnap.ai/file/lQGLcrglNDzFYdeqs9PjutjvLTZs69

Kind Regards

Yes, but when I do that, look how your entire theme breaks… You can check it now, code is commented.

Please help me — it’s very important for me to keep this plugin here with you. This break is not caused by Google reCAPTCHA.

Check video here and also attached image: https://go.screenpal.com/watch/cTQ3Y5nD6H7

Attachments:

You must be logged in to view attached files.

By default, our subscription form is positioned horizontally and isn’t designed to accommodate additional content (added by a plugin) between the form fields and the submit button. In this case, the solution is to arrange the content vertically, one item below the other, which can be achieved with this custom CSS code:

.mc4wp-form-fields .wd-grid-f-stretch > .wd-col-auto { width: 100%; text-align: left; }

Hi, you’re awesome, thank you so much!

Could I please ask you, so I can close this ticket, to help me center the box with the three attached images without breaking the captcha itself, just like in my code where you said to comment it out?

Attachments:

You must be logged in to view attached files.

To center the reCAPTCHA block within its wrapper, use the following custom CSS code:

.gglcptch_recaptcha > div { margin-inline: auto; }

To change the alignment of the submit button from the left edge to the center in the newsletter form, refer to the previous custom CSS code we provided for the newsletter form and change the text-align value from left to center.

Hello, everything looks great, but unfortunately, the bug with the validation going off-screen has appeared again — the one I actually opened a ticket for. I’m attaching a new screenshot after the changes and your suggestions.

Attachments:

You must be logged in to view attached files.

Hello,

As you can see from the previous iterations, the validation window stops working only when the area with the reCAPTCHA checkbox is shifted toward the center of the screen. We can see that the position of the plugin’s validation window is controlled exclusively by its own script, which, for some reason, fails to work when the checkbox area is moved to the center. Our theme does not affect the validation window in any way — neither through custom styles nor scripts — and it’s clear that when the custom code that changes the checkbox area’s position is removed and the area aligns to the left edge, the plugin starts functioning normally, just as it does in standard themes.

Since this issue is caused by an incompatibility between the third-party plugin and the alignment modification, unfortunately, we cannot fix it. By default, and without any external interference by custom code, this plugin works the same way in WoodMart as it does in standard themes such as TwentyTwenty or WooCommerce Storefront. In this case, we can suggest the following solutions:
1. Avoid modifying the plugin’s alignment and keep it aligned to the left, as intended by its developers.
2. Remove the custom alignment that centers the reCAPTCHA area and contact the plugin’s support team regarding the issue where the validation window script fails to correctly position the window when the checkbox area is shifted away from the left edge.
3. Keep the reCAPTCHA checkbox area centered on desktop, but restore its left-aligned position on mobile (as expected by the plugin’s validation positioning script) using the following custom code, which should be placed in the Mobile section of your custom CSS field:

  .gglcptch_recaptcha > div { 
    margin-inline: unset; 
  }

Kind Regards

[Author]

Posts