Responsywny widget reCaptcha

DBanaszewski | 2018-08-10 17:36:51 UTC | #1

Witam :slightsmile:
Od pewnego czasu, na mojej stronie jest formularz kontaktowy, który NIE MIAŁ widgetu reCaptcha (od lutego tylko dwa boty napisały coś do mnie :stuckout_tongue:). Postanowiłem go (widget) wprowadzić, lecz naptokałem się na problem z jego rozmiarem. Na komputerach jest wszystko ok - jest na środku. Na telefonach jest prawie ok :/ Wychodzi trochę poza content. Próbowałem na różne sposoby i nie daje rady :/ Proszę o pomoc. Załączam zdjęcie ;)

Nieznajomy11 | 2017-04-07 13:37:39 UTC | #2

[code].g-recaptcha {
transform: scale(0.77);
-webkit-transform: scale(0.77);
transform-origin: 0 0;
-webkit-transform-origin :0 0;
}[/code]
Zamknięcie w [code]@media screen and (max-height: 575px) {}[/code] będzie dobrym pomysłem

Mnie tez captcha nie lubi, ogólnie ciężko ją formatować :l

DBanaszewski | 2017-04-07 13:45:13 UTC | #3

Prawie dobrze :confused:
Tylko nie chce się wyśrodkować :/
Użyłem margin itp. i nie łapie :confused:

Nieznajomy11 | 2017-04-07 13:51:51 UTC | #4

Prosto z kiciusie.pl/rejestracja:

[code]

DBanaszewski | 2017-04-07 14:03:47 UTC | #5

Albo ja coś źle robię, albo mnie nawet CSS nie lubi :/

Edit 1: wait? What? XD Coś się CSS nie zgadza.

DBanaszewski | 2017-04-07 14:03:03 UTC | #6

I efekt

DBanaszewski | 2017-04-07 14:25:51 UTC | #7

Niestety nie środkuje mi widgetu :confused:

Nieznajomy11 | 2017-04-07 14:27:03 UTC | #8

Cache?

DBanaszewski | 2017-04-07 14:27:52 UTC | #9

Czyszczone było :O Nawet w trybie prywatnym? No nic… wyczyszczę jeszcze raz :)

DBanaszewski | 2017-04-07 14:29:47 UTC | #10

Nawet zmiana przeglądarki, wyczyszczenie cache nie pomogło :confused:

Nieznajomy11 | 2017-04-07 14:41:57 UTC | #11

Sprawdziłem - u mnie na telefonie też to nie działa, ale niestety nie jestem w stanie powiedzieć co jest przyczyną problemu.

DBanaszewski | 2017-04-11 15:34:18 UTC | #12

Poradziłem sobie :stuckouttongue:
Oto wyjaśnienie:

.g-recaptcha-outer {
    text-align: center !important;
    border-radius: 4px !important;
    background: #f9f9f9 !important;
    border-style: solid !important;
    border-color: #37474f !important;
    border-width: 1px !important;
    border-bottom-width: 2px !important;
}

.g-recaptcha-inner {
    width: 154px !important;
    height: 82px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

.g-recaptcha {
    position:relative !important;
    left: -2px !important;
    top: -1px !important;
}

Widget reCaptcha dodajemy tak:

<div class="g-recaptcha-outer">
  <div class="g-recaptcha-inner">
    <div class="g-recaptcha" data-size="compact" data-sitekey="Tutaj SITEKEY"></div>
  </div>
</div>

Po dodaniu mamy taki efekt:

PS. Ten kod CSS zaokrągla rogi w stylu dopasowanym do Bootstrap’a (aby to usunąć, wystarczy np. zakomentować linijkę border-radius).

DBanaszewski | 2018-08-10 17:36:53 UTC | #13