Resizing / Styling reCaptcha for mobile devices

1.8k views Asked by At

I am currently struggling with resizing (or styling) the reCaptcha element in a form. When viewing the form on a mobile device (portrait orientation), it hangs off a bit and looks pretty sloppy.

The form is from formstack and rendered by a script. I have been able to style every other element of the form using CSS and add placeholder attributes to each input with jQuery without any issue whatsoever. However, it seems once I get down to the reCaptcha block neither of these options are working. I have been able to made changes directly in Chrome dev tools to get the result I want (or one that will work, rather), however once applying these with CSS OR jQuery, neither have worked. I have also looked through these google recaptcha docs, however this isn't even the same kind... instead, this is what I'm working with.

SO, I am unsure of what to try next or where to look for a solution.

I have tried targeting individual elements and changing their size, I have tried just removing the background from the elements since this alone would make it look less "funky".

Has anyone else had a similar issue? If the code is needed I will provide it, it's just quite a bit of code rendered by said script. I understand it may be hard to even suggest where I'm going wrong without it but I wasn't sure if someone maybe able to just suggest another option to try?

Thanks!

2

There are 2 answers

2
hardik pandey On

Use the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

With the help of just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:

<div class="g-recaptcha" 
 data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 
 style="transform:scale(0.77);transform-origin:0 0">

`

0
Wunderboy On

I have used this code

Line #147 - #150
            'theme' => $this->modx->getOption('recaptchaTheme',$scriptProperties,'clean'),
            'width' => $this->modx->getOption('recaptchaWidth',$scriptProperties,250),
            'height' => $this->modx->getOption('recaptchaHeight',$scriptProperties,150),
            'lang' => $this->modx->getOption('cultureKey',null,'en'),

example link