Some days ago I needed to insert the reCAPTCHA in a form particularly strict. Unfortunately the code released by Google is not responsive and I found this situation:
HOW TO RESIZE THE GOOGLE RECAPTCHA IN CALDERA FORM
I though: “No problem, I’ll fix it in a couple of minutes!”
Needless to say, I was wrong.
The situation was this: I had a form created with Calder Form, I inserted the code generated by Google but the Google reCAPTCHA overlapping the screen.
I tried several css code but no one worked. After a couple of hours I thought to a potential solution. My Idea was about the transform:scale(value) and transform-origin: (value).
With this technique, simply adding 2 lines of CSS I was able to transform the entire scale of the reCAPTCHA.
I wrote this code:
transform:scale(0.62)!important; -webkit-transform:scale(0.62)!important;
I added also !important becasue I worked on the CSS of Divi.
Then I added a class to my form to be sure to identificate exactly the div.
It was working.
But the reCAPTCHA was not aligned to left, so I added the following code too:
transform-origin: 0 0; -webkit-transform-origin: 0 0;
And the magic appeared!
The reCAPTCHA was perfect.
To recap
- Create a custom class to your reCAPTCHA
- Copy and Paste this code in you CSS sheet
.customclass {
transform:scale(0.62)!important;
-webkit-transform:scale(0.62)!important; transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
At the end, lean your back against the back of the chair and enjoy the show.
That’s all, folks.