2

How can I resize the recaptcha container, I mean I want to keep everything in scale, just want the whole container is smaller to fit mobile view.

The original size right now:

enter image description here

And on mobile view it is not looking good:

enter image description here

Dont want to use any kind of customized theme or something, just want the whole container is smaller, say 70%, any idea how to do it?

Ronaldinho Learn Coding
  • 13,254
  • 24
  • 83
  • 110

2 Answers2

6

Did you try the css zoom property?

zoom:.7;

It's not supported everywhere, but if you're using responsive design such that it only happens on smaller screens (mobile browsers), those devices will generally know what to do with this.

Joel Coehoorn
  • 399,467
  • 113
  • 570
  • 794
  • You have any sample or link about using this zoom property? I need to apply it to my current style but I really not knowing much about css, just some basic stuff but I can follow if the instruction was not too crazy hard. – Ronaldinho Learn Coding Feb 20 '14 at 20:05
  • 1
    Umm... just add `zoom:.7;` to the current style? Also see here: http://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css – Joel Coehoorn Feb 20 '14 at 20:12
3

With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.

The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens.

new compact reCAPTCHA v2.0

It is not the best looking widget, but it fits with less work than the other solutions.

For more attributes, check Google's reCAPTCHA v2.0 documentation

Security Aficionado
  • 476
  • 4
  • 7
  • Just to add a detail: The "data-size" attribute is attached to the
    element that the recaptcha is created in. For example, ```
    ```
     – kael May 30 '16 at 22:19