How to resize the Google noCAPTCHA reCAPTCHA

Some day ago a client wanted to add Google noCAPTCHA reCAPTCHA to the gravity form. all looks fine but when i was visiting the site on mobile devices the Google reCAPTCHA overlapping the screen.

Its not looking good some how i need to fix it and resize the Google reCAPTCHA. There are not enough resources to control the Google noCAPTCHA reCAPTCHA, but it seemed no matter what I tried to target with CSS or a combination of CSS and javascript, nothing seemed to change the look of the captcha. So rather than trying to change what was generated by Google’s externally-loaded javascript and css files, I decided to change what I felt I could change – the div you place on your site with the g-recaptcha class that loads up the reCAPTCHA.

Then i was tried several css code but no one working. then i was thing about the transform:scale(value)  and transform-origin: (value) . By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:

Much nicer!

How and where you need to add the css, simple inspect your browser by pressing ctrl+shift+I (For windows) or right click on mouse and click on Inspect and then find the class=”some-class” data-theme=”light/dark” data-sitekey=”XXXXXXXXXXXXX” just copy the class or id and use the css

transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;

the -webkit-  code for browser supporting code. you should adjust the transform:scale(0.77);  to any point. Make sure you will keep same point to -webkit-transform:scale(0.77);  here also. and keep as it the transform-origin:0 0; -webkit-transform-origin:0 0;

So, in order to have the reCAPTCHA align to the top left, I set it so the transformation would originate from the top left-hand corner (rather than from the center, which is the default). I used “0 0”, but “left top” would have had the same effect.

That’s just a basic way to show how you can quickly change the size of the reCAPTCHA with inline styling. For something nicer, I’d suggest assigning a new class and leaving it at full size for anything above mobile, then using a media query to change it to the smaller size. Even better would be to use a transition effect so it visually “shrinks down” when you go to mobile.

To scale the images popup, you can use this code, either by inserting it as a separate style embed (like below) or simply adding it to your CSS:

<style> 
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scal(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
} 
</style>

Media queries:

<style> 
@media screen and (max-width: 575px){ 
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
} 
} 
</style>

If you found this useful, please let me know in the comments below.