How can i change a Google Recaptcha Width?

Question

I try to implement the google recaptcha v1 in a ASPX project, and i use a DLL for that and i have a control validator for all fields of my form.

My web site is responsive but i can change the with of my Google recaptcha to become responsive too.

This is how to implemente my captcha:

<div>
        <captcha:RecaptchaControl Theme="white"  
         ID="RecaptchaControl1" runat="server"
         PublicKey="mypublicKey"
         PrivateKey="myprivatekey" />  
</div>

And i looks like :

In responsive mode : the width of my device is : 300px but the captcha is width: 318px and when i inspect element i found this :

#recaptcha_area, #recaptcha_table {
width: 318px !important;
}

NB: It's a default style of Google Captcha not the mine , "inline-1".

Does anybody know how to do this?

Thanks

Answer 1

Just make your rule more specific:

html #recaptcha_area, html #recaptcha_table {
    width: 300px !important;
}

Answer 2

Add below style properties to specific div element which immediately above iframe

html #recaptcha_area, html #recaptcha_table {
   transform: scale(0.77);
   -webkit-transform: scale(0.77);
   transform-origin: 0 0; 
   -webkit-transform-origin: 0 0;
}