reCaptcha v2 non-responsive check box

Hey @harshgoyaa – Thanks for contacting us!

I tested the form on my OnePlus 7T, and the reCAPTCHA checkbox seems to be working well for me. When you get a chance, can you please share the browser and device you’re using so I can take a closer look?

Kindly,

hi @prashantrai

The browser that i am using is chrome and the device i am using is vivo v9 pro.

https://drive.google.com/file/d/18W2ZKPjz3_vlHbTyZtWxeTdUyT8PKZVg/view?usp=sharing

hope this helps ??

Thanks and regards

Hey @harshgoyaa – Thanks for following on this ticket!

When you get a chance, can you please try adding following CSS and let me know how it goes:

@media only screen and (max-width: 600px) {
  .wpforms-recaptcha-container.wpforms-is-recaptcha {
        width: 260px !important;
        }
}

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

hi @prashantrai,

thank you for working on this, but sadly this doesn’t help :(.

Hopefully for the best ??

Thanks and Regards
Harsh

Hey @harshgoyaa,

When you have some time, can you please try clearing the cache after adding the code and see if that works?

Kindly,

hi @prashantrai
sorry for late rely,

But no it does not help. (no cache plugin is present, i cleared from hosting side)

Thanks and Regards

Hey @harshgoyaa,

Thanks for your interest in this ticket!

When you get a chance, along with the previous code please try adding following CSS and let me know how it goes:

@media only screen and (max-width: 600px) {
 .g-recaptcha iframe {max-width: 90% !important;overflow: hidden;}
}

Kindly,

Hi @prashantrai

This Also doesn’t help. it does reduce the size of the captcha box(like it cuts of the part and show sonly 90%) but it is not responsive. it doesnt look good and we can clearly see that thr is something missing

Hey @harshgoyaa,

When you get a chance, please replace the previous code with following and that should fix the issue for you:

@media (max-width: 380px) {
    .wpforms-form .wpforms-recaptcha-container .g-recaptcha > div {
        transform: scale(0.85) translateX(-25px);
        
    }
}

I tested the code on https://apbestpackersandmovers.com/, and it works fine. Here’s a screenshot.

Kindly,

hi @prashantrai

Thank you this looks good

Hey @harshgoyaa,

Glad to hear that. Please feel free to reach out if you have any questions about WPForms lite.

Kindly,