G-recaptcha, адаптация, есть проблема, как решить?

Question

[Антон Вебсайтовский]

Поставил новую капчу на сайт, версию 2. До этого старая стояла.
Проблема такая, когда появляется капча она растягивает блок.
Если капчу убираю, то с блоком нет проблем.
Ощущение будто капча ставит правый паддинг, но ничего такого в стилях нет.

Блок с капчей
Блок без капчи
Css

.g-recaptcha {
  transform: scale(.83);
  -webkit-transform: scale(.83);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
@media only screen and (max-width:380px) {
  .g-recaptcha {
    transform: scale(.79);
    -webkit-transform: scale(.79);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0
  }
}
@media only screen and (max-width:340px) {
  .g-recaptcha {
    transform: scale(.75);
    -webkit-transform: scale(.75);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0
  }
}

HTML
<div class="g-recaptcha" data-sitekey=""></div>

Css, блок в котором все это.

.corzl {
    width: 100%;
    margin-bottom: 20px;
  }

Все перерыл, не могу понять в чем проблема, явно в капче.

Answer 1

[Антон Вебсайтовский]

Решил вопрос так.
Добавил width: 230px; чтобы при определенном разрешение экрана применялся и все было ок.

.g-recaptcha {
  transform: scale(.83);
  -webkit-transform: scale(.83);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
@media only screen and (max-width:420px) {
  .g-recaptcha {
    width: 230px;
    transform: scale(.79);
    -webkit-transform: scale(.79);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0
  }
}
@media only screen and (max-width:340px) {
  .g-recaptcha {
    transform: scale(.75);
    -webkit-transform: scale(.75);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0
  }
}

Comments

[yarovikov]

можно сделать полностью адаптивную капчу

[Антон Вебсайтовский]

yarovikov, это как?

Answer 2

[Андрей Андреев]

А вообще без ваших стилей для капчи нормально отображается?
У рекапчи свои стили и может появляться всплывающий блок с картинками.

Comments

[Антон Вебсайтовский]

это я знаю насчет блока ! стили же подгружаются с гугла.

[Антон Вебсайтовский]

Проверил без стилей, вывел в пустое место и да ! проблема не в стилях.

Answer 3

[Александр Суханов]

Посмотрите в инспекторе, там будет понятнее.
(в мозиле - Исследовать элемент, в хроме - Посмотреть код)

Капча добавляется фреймом и для него могут стоять свои стили. Или еще что то.

Comments

[Антон Вебсайтовский]

Это понятно но я же их обламываю своими стилями, странно.

[Александр Суханов]

Антон Вебсайтовский, Без просмотра кода тут не угадать. Но я грешу на iframe
Очень давно сталкивался с похожим, только у меня капча была не полностью. оказалось в шаблоне стояло:

iframe {
	width:75%;
}

[Антон Вебсайтовский]

Александр Суханов, а я тож смотрел и ничего такого не нашел )