ReCaptcha overflow/go out of screen

Question

How can i fix this issue? Sometimes it work actually normal but a lot more often i see mistakes like those . i already tried to change css but it change only button proportions not image-select here is my html for button <div class="g-recaptcha col-lg-12" data-sitekey="#####" data-callback="automationRecaptchaCb" align="center"></div>

image captcha too high and i can't find what i looking for

image too low and i cannot submit captcha

enter image description here

Answer 1

So I actually find solution that works fine , hope i can help someone i add it to my page styles

@section PageStyles{
<style type="text/css">

.g-recaptcha > div {
width: 100% !important;
    }

.g-recaptcha > div > div {
margin: 4px auto !important;
/*text-align: center;*/
width: auto !important;
height: auto !important;
}

.g-recaptcha iframe {
transform: scale(0.85);
-webkit-transform: scale(0.85);
transform-origin: left top;
-webkit-transform-origin: left top;
}
#rc-imageselect {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

/*-- Pantallas superiores a 480px --*/
@@media(min-width: 480px){
#rc-imageselect {
transform: none;
-webkit-transform: none;
}

.g-recaptcha iframe{
max-width: none;
transform: none;
-webkit-transform: none;
}
}
</style>
}