Google reCaptcha Responsive(Uyumlu) Tasarım Problemi

Google reCaptcha aldınız sitenize koydunuz. Tarayıcı ile görüntülediğiniz de hiç bir problem görmediniz. Temanız uyumlu, birde değişikliklere mobil cihazınızdan baktınız ve o da ne?! Google reCaptcha kutunun dışına taşıyor. Şu anda fixlemek üzere olduğum bir durum aynı zamanda.

İlk olarak aşağıdaki CSS kodu’nu CSS dosyanıza ekleyin:

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

Daha sonra JavaScript dosyanıza aşağıdaki kodu ekleyin:

// Google reCaptcha Uyumluluk Çözümü

function uyumluReCaptcha() {
    // reCaptcha'nın genişliği
    var reCaptchaGen = 304;
    // reCaptcha'nın içinde olduğu kutunun genişliği
    var kapsulGen = $('.g-recaptcha').parent().width();
  
    if(reCaptchaGen > kapsulGen) {
        // Oranlarını hesaplayalım
        var oran = kapsulGen / reCaptchaGen;
        // Elde ettiğimiz orana göre yeniden ölçekleyelim
        $('.g-recaptcha').css({
            'transform':'scale('+oran+')'
        });
    }
}

$(function() { 
 
    // Ölçekleme işlemini yapalım
    uyumluReCaptcha();
  
    /**
     * Pencere boyutu değiştiği anda tekrar ölçekleyelim
     * throttle kütüphanesi
     * https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js
     */
    $(window).resize( $.throttle( 100, uyumluReCaptcha ) );
  
});

Çalışan demo için buraya tıklayınız. Kolay gelsin,