没有验证码 reCAPTCHA 调整大小

Question

您好，我刚刚将 Google 的 No CAPTCHA reCAPTCHA 添加到我的网站，但我遇到了一个小问题。它不适合我的移动网站，这是一个大问题。我已经尝试了一切，例如：

 HTML

<div id="captchadisplay">
  <div class="g-recaptcha" data-sitekey="???"></div>
</div>

CSS

#captchadisplay {
  width: 50% !important;
}

和

CSS

.g-recaptcha {
  width: 50%;
}

但是我似乎无法为我的移动网站缩小它。有任何想法吗？ :)

原文由 michael jones 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过使用 CSS transform 属性，您可以通过更改 reCAPTCHA 的整个 比例 来实现更改宽度。

通过添加两个内联样式，您可以使 reCAPTCHA 非常适合您的移动设备：

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

更多细节可以在我的网站上找到： https ://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

原文由 Geek Goddess 发布，翻译遵循 CC BY-SA 4.0 许可协议