html - 如何显示谷歌验证码？

Question

我的 Google 验证码的末端被砍掉了，尤其是移动设备和桌面设备的右端？

这是为什么？

我有以下 html:

"wpcf7-form-control-wrap your-subject"><input type="text" 
name="your-subject" value="" size="40" class="wpcf7-form-control 
wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea 
name="your-message" cols="40" rows="10" class="wpcf7-form-control 
wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><div class="anr_captcha_field"><div id="anr_captcha_field_1" 
class="anr_captcha_field_div"></div></div><span class="wpcf7-form- 
control-wrap g-recaptcha-response"></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control 
wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>. 
</div></div><!-- .entry-content -->
<footer class="entry-footer">
</footer><!-- .entry-footer -->

以及以下 CSS:

#anr_captcha_field_1 {overflow: hidden;
border-radius: 0px;
transform: scale(0.9);
transform-origin: left top;
margin-left:35px; background-color: #fff; border: none;
}

@media (max-width: 5000px) and (min-width: 768px) 
{#anr_captcha_field_1 {

overflow: hidden;
border-radius: 0px;
transform: scale(0.9);
transform-origin: left top;
margin-left:10px; background-color: #fff; border: none;
}}

出现问题是因为我想在桌面上居中捕获，现在右端被砍掉了。

页码:https://adsler.co.uk/contact-us/

Answer 1

您还需要增加表单的最大宽度。它正在阻止验证码。

  @media (max-width: 5000px) and (min-width: 768px){
      .wpcf7 {
          max-width: 330px;
          padding: 0px;
      }
    }

    .rc-anchor-normal {
        height: 74px;
        width: 300px;
    }