Recaptcha extending off contact form in mobile

I’m experiencing the same annoying issue. reCaptcha isn’t mobile responsive, which is Google’s fault. You can’t directly edit the css of reCaptcha and customizing reCaptcha in general via the API is extremely painful. The most I’ve been able to do is add a overflow:hidden to .wpcf7-form-control-wrap so it at least isn’t extending outside the form. Not ideal, but you work with what you got.

Hah! I actually figured it out! ??

Add…

.wpcf7-form-control-wrap iframe { transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0; }

..to a media query targeting max-width:699px and that should resolve it.

Hi!

I tried this, but it’s giving me an error saying that I need an LBRACE somewhere in the css. I don’t know where exactly that should go. Here’s what I have.

/* Contact Form 7 Styles
---------------------------------*/
@media only screen and (min-width: 699px)
.wpcf7-form-control-wrap iframe {
    transform:scale(0.90);
    -webkit-transform:scale(0.90);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

This would be correct…

/* Contact Form 7 Styles
---------------------------------*/
@media only screen and (min-width: 699px) {
.wpcf7-form-control-wrap iframe {
    transform:scale(0.90);
    -webkit-transform:scale(0.90);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}
}