Как отобразить гугл капчу? - PullRequest
0 голосов
/ 28 мая 2019

Конец моей капчи 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/

Ответы [ 2 ]

1 голос
/ 28 мая 2019

Вам также необходимо увеличить максимальную ширину формы.он блокирует капчу.

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

    .rc-anchor-normal {
        height: 74px;
        width: 300px;
    }
0 голосов
/ 28 мая 2019

Добавьте к своему CSS:

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

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

Это должно помочь решить вашу проблему

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...