Google ReCaptcha not resizing

[Myles Sinclair]

Myles Sinclair

September 3, 2020 at 9:15 am

I’m using the Kadence form block to create a contact form, which can be seen on this test site – *Login to see link

It looks fine on desktop and tablet, but on mobile, the ReCaptcha is overlapping the form on the right-hand side.

My CSS to resize the ReCaptcha isn’t working for some reason. I’ve tried the following three code versions without any success.

@media screen and (max-width: 480px){
.grecaptcha-badge {
transform:scale(0.65);
-webkit-transform:scale(0.65);
}

@media screen and (max-width: 480px){
.grecaptcha-badge {
transform:scale(0.80);
-webkit-transform:scale(0.80);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

@media screen and (max-width: 991px){
.grecaptcha-badge {
transform:scale(0.85);
-webkit-transform:scale(0.85);
}

None of the above seems to have any impact on the ReCaptcha.

Any ideas on what to try?