Стандартная ширина капчи от Google reCAPTCHA имеет ширину 302 пикселя.

Соответственно, если блок, в котором она находится имеет меньший размер, то его либо раздвинет, либо будет не видно часть капчи.

Лечится это очень простым JS кодом с библиотекой jQuery

Остается только поместить саму капчу в блок с классом container

Работает все очень просто: определяется ширина блока, в котором расположена капча, и если она ее меньше, то происходит масштабирование.

На эту тему:

Добавить комментарий

Ваш комментарий отправлен!

Комментарии:

  • Дмитирй:

    Написал разработчикам чтобы сделали ее responsive ё-маё. 21 век за окном.

    Ответить
    • Alexander:

      Невидимая сейчас вроде новая самая, только я ее не ставил ни разу, и такая пойдет 🙂

      Ответить
  • Дмитирй:

    Нарыл вот еще что. Капча бывает 2 размеров стандартный и компактной.
    Чтобы сделать капчу компактной
    Контактные формы — Редактировать контактную форму — [recaptcha size:compact]
    Ну а еще ей можно задать класс или размер
    Подробности здесь
    https://contactform7.com/recaptcha/

    Ответить
  • Дмитирй:

    Отлично. Спасибо Вам большое. Вот небольшое дополнение,….

    function changeCapthaSize() {
    var reCaptchaWidth = 302;
    var containerWidth = $(‘.класс дива в котором капча’).width();
    if(reCaptchaWidth > containerWidth) {
    var reCaptchaScale = containerWidth / reCaptchaWidth;
    $(‘.g-recaptcha’).css({
    ‘transform’:’scale(‘ reCaptchaScale ‘)’,
    ‘transform-origin’:’left top’
    });
    }
    };

    $(window).ready(function(){
    changeCapthaSize();
    });
    $(window).resize(function(){
    changeCapthaSize();
    });

    Ответить
    • Alexander:

      Спасибо, хорошее дополнение!

      Ответить
  • Сергей:

    Здравствуйте! А куда эту часть кода вставлять?

    Ответить
    • Alexander:

      Можно в шапку сайта, можно в файл с другой жавой

      Ответить
      • Сергей:

        Вставил этот код в файл стилей жавы но результата нет. Разрешение экрана 480*800. Адрес страницы сайта https://computerseo.ru/contact.php

        Ответить
        • Alexander:

          Сергей, у вас капча более старая.
          Попробуйте как нибудь так
          (код вынес в отдельный файл, т.к. в комменте он портится
          Еще не забудьте, что зум происходит после загрузки страницы. Т.е. если вы открыли капчу на большом экране, а потом сузили, размер не поменяется. Нужно обновить страницу.

          Ответить
  • Андрей:

    Дай Бог Вам здоровья )

    Ответить