I have tried several of the built in templates for Re-Captcha, but none of them seem to work well for mobile devices. Of course I can move things around with CSS but when the picture itself is wider than the screen there is little I can do.
in fact, using the "clean" template, the picture is set at 300px wide.
Furthermore the input (where one is supposed to type the number) is as wide as the picture and on my android phone, held vertically, it falls above the reload icon group, making it impossible to ask for a new captcha.
I was able to rework the template to be a bit more usable using this CSS:
Code:
#recaptcha_challenge_field_holder,
#recaptcha_response_field,
.recaptcha_input_area {width: 200px!important;margin-left: 50px;}
#recaptcha_image,
#recaptcha_image img
{
width: 200px !important;
cursor: pointer;
}
#recaptcha_image img:hover
{
position: absolute;
width: 300px !important;
}
.recaptcha_only_if_image,
.recaptcha_only_if_audio
{
display: block;
}
But it's cobbled together at best and still the reload group is a mess. How difficult would it be for Google to make this more responsive?
I know recaptcha has been reworked and adapted, but those adaptation require the upload of a separate plugin.
I don't think I am the first one with this issue, what has been done to solve the "too big captcha" for mobile screens?
Thank you for any help
