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;
    }

Answer 2

添加到CSS：

.anr_captcha_field {
  display: inline-block;
  margin-left: -10px;
}

@media (max-width: 768px) {
  .anr_captcha_field {
      margin-left: 0;
  }
}

这应该有助于解决您的问题

如何显示Google验证码？

2 个答案: