4

As per the title looking for help to be able to responsively have Google recaptcha change from the data-size="compact" to data-size="normal" at 768px. Is it possible without javascript?

Captcha HTML:

<div class="captcha_container">
<div class="g-recaptcha" data-sitekey="6Le8iBkTAAAAzeCvzZRO3FePZO" data-size="compact">
</div>
</div>

CSS:

.captcha_container{padding: 20px 0px 0px 0px; text-align: center;}

.g-recaptcha{ display: inline-block;}
JPB
  • 583
  • 1
  • 6
  • 22

1 Answers1

0

You can't change the data-size without using javascript, however if you'd like, you can change the scale to conform to new screen widths.

example:

.g-recaptcha {
    -webkit-transform:scale(0.77);
    -ms-transform:scale(0.77);
    transform:scale(0.77);
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}

Someone has asked this previously, there were some interesting answers here: https://stackoverflow.com/a/29521983/6049581

Community
  • 1
  • 1
Frits
  • 6,116
  • 10
  • 39
  • 50
  • Thanks Frits, I'm aware of the scaling option but trying to find a solution with this approach. Its a new feature and currently there is no info online regarding this particular challenge. – JPB May 10 '16 at 05:42
  • I get you :) Is there a particular reason as to why you are avoiding javascript? – Frits May 10 '16 at 05:47
  • Just seeing if there was any css trickery. Trying to keep load times down but I have a few functions already. Can you suggest a way to do it? – JPB May 10 '16 at 06:46
  • To be completely honest, my suggestion would be to stick with the CSS. It seems that Google prevents accessing it's dom elements with javascript (see: http://stackoverflow.com/a/28619922/6049581) – Frits May 10 '16 at 06:51
  • I haven't had a chance to test it yet, but the jQuery that I would have tried would have been `$('.g-recaptcha').attr('data-size', 'normal');` - I doubt however that this would work, due to Google using the data-size as a parameter before inserting the recaptcha iframe. – Frits May 10 '16 at 06:54