Адаптивная Recapcha

Адаптивная Recapcha

ПОДЕЛИТЬСЯ СТАТЬЕЙ:


Всем привет! В данной статье рассмотрим решения правильного отображения капчи reCAPTCHA на малых экранах.

Стандартная ширина капчи от Google reCAPTCHA имеет ширину 302 пикселя. Очень часто на мобильных экранах капча выходит за пределы блока, в котором она находится, так как блок по ширине оказывается уже ее.

Есть три способа вылечить эту проблему: 

Решение с помощью javaScript

<script>

$(function() {
var reCaptchaWidth = 302;
var containerWidth = $('.respon-kaptcha').width();
if(reCaptchaWidth > containerWidth) {
var reCaptchaScale = containerWidth / reCaptchaWidth;
$('.g-recaptcha').css({
'transform':'scale('+reCaptchaScale+')',
'transform-origin':'left top'
});
}
});
</script>

Саму капчу нужно поместить в блок div с классом .respon-kaptcha

Код можно указать прямо на странице в тегах <script> либо в вашем скриптовом файле. Важно! Данный скрипт должен подключаться ниже подключения библиотеки jQuery в структуре кода.

Решение с помощью CSS

Ниже указанный код добавьте в ваш файл стилей.

.g-recaptcha, .g-recaptcha div{
overflow: hidden;
max-width: 100%;
}
.g-recaptcha iframe, body > div[style]:last-of-type
{ transform: scale(0.75);
transform-origin: left top;
}

И самый простой способ.

Блоку div в котором расположена капча добавьте инлайновые стили: style="transform:scale(0.77);transform-origin:0 0;"

На этом все.


Читать еще:

Как установить видео на сайт

Коммерческие и некоммерческие запросы: суть и различия

Адаптивная Recapcha

Modx перенос сайта на другой хостинг

Сайтостроение: хороший хостинг - хорошее начало