No CAPTCHA not responsive

ja

janman 11 Mar, 2015

How can i get No CAPTCHA to be responsive.

Gr

GreyHead 11 Mar, 2015

Hi Janman,

Sorry, no idea, have you checked the Google help?

Bob

ja

janman 11 Mar, 2015

I have tried using css override but it does not reflect.
http://www.modernmagic.com/blog/joomla-technical-support/no-captcha-recaptcha-not-responsive.html

ja

janman 11 Mar, 2015

Its all loading inside a iframe you can change the iframe width but that is the only thing you can do. Please get back to me with a fix.

Gr

GreyHead 11 Mar, 2015

Hi Janman,

Sorry, I don't have a fix for Google's code.

Bob

ja

janman 11 Mar, 2015

it because you are useing the automatically rendering of the widget in your code

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

you should create it yourself, so that we you can stye it.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<noscript>
  <div style="width: 302px; height: 352px;">
    <div style="width: 302px; height: 352px; position: relative;">
      <div style="width: 302px; height: 352px; position: absolute;">
        <iframe src="https://www.google.com/recaptcha/api/fallback?k=your_site_key"
                frameborder="0" scrolling="no"
                style="width: 302px; height:352px; border-style: none;">
        </iframe>
      </div>
      <div style="width: 250px; height: 80px; position: absolute; border-style: none;
                  bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">
        <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                  class="g-recaptcha-response"
                  style="width: 250px; height: 80px; border: 1px solid #c1c1c1;
                         margin: 0px; padding: 0px; resize: none;" value="">
        </textarea>
      </div>
    </div>
  </div>
</noscript>

Gr

GreyHead 11 Mar, 2015

Hi janman,

You can probably do that in a Custom Code element.

Bob

ja

janman 12 Mar, 2015

Thanks bob will try
And thanks for all the help

Forums

No CAPTCHA not responsive