Ваша корзина пуста!
Корзина

Всем привет! В данной статье рассмотрим решения правильного отображения капчи 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;"

На этом все.


Новости из этой категории
07.04.2018 15:36 7988
Способы позиционирования элементов
В данной статье рассмотрим способы центрирования э..