CSS to resize the Google reCAPTCHA in a form

Have you ever built a site that is completely responsive in all sizes, but then you notice the Google reCAPTCHA extends past the outer element forcing that dreaded space to the right side? Now you can fix it with the following CSS.

By default you would use .g-recaptcha, but if you’re using a plugin you’ll need to inspect the element to see what name is being given to the parent item by the plugin you’re using. In this case #fscf_recaptcha1 is the ID that was assigned by the plugin.

#fscf_recaptcha1 {
transform:scale(0.97);
-webkit-transform:scale(0.97);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

Like us on Facebook to learn how you can resize the verification squares that occasionally popup asking you to “Click all the squares that contain _____.” This media query is only a few lines long, and prevents that verification popup from pushing extra space on the right in your design.

The same goes for this as above. #fscf_recaptcha1 by default will be .g-recaptcha, just check to see what ID or class is being assigned of using a plugin.

@media screen and (max-height: 575px){
#rc-imageselect, #fscf_recaptcha1 {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}

CSS to resize the Google reCAPTCHA in a form

Leave a Comment

Cancel Reply