Redimensionnement/mise en forme reCaptcha pour les appareils mobiles

Question

Je suis actuellement aux prises avec le redimensionnement (ou le style) de l'élément reCaptcha sous une forme. Lorsque vous affichez le formulaire sur un appareil mobile (orientation portrait), il se bloque un peu et a l'air assez négligé.

Le formulaire provient de formstack et est rendu par un script. J'ai été capable de styliser tous les autres éléments du formulaire en utilisant CSS et d'ajouter des attributs d'espace réservé à chaque entrée avec jQuery sans aucun problème. Cependant, il semble qu'une fois que je descends au bloc reCaptcha, aucune de ces options ne fonctionne. J'ai été capable de faire des changements directement dans les outils de développement de Chrome pour obtenir le résultat que je veux (ou celui qui fonctionnera, plutôt), cependant une fois appliquant ces derniers avec CSS OU jQuery, ni l'un ni l'autre n'ont fonctionné. J'ai également regardé these google recaptcha docs, cependant ce n'est même pas le même genre ... à la place, this is what I'm working with. Donc, je ne suis pas sûr de ce qu'il faut essayer ou où chercher une solution.

J'ai essayé de cibler des éléments individuels et de changer leur taille, j'ai essayé d'enlever simplement l'arrière-plan des éléments car cela seul le rendrait moins "funky".

Est-ce que quelqu'un d'autre a eu un problème similaire? Si le code est nécessaire, je vais le fournir, c'est juste un peu de code rendu par le script. Je comprends qu'il peut être difficile de suggérer même où je vais mal sans cela, mais je ne savais pas si quelqu'un pourrait peut-être suggérer une autre option pour essayer?

Merci!

Answer 1

Utilisez la propriété de transformation CSS que vous pouvez modifier en modifiant l'échelle entière du reCAPTCHA.

Avec l'aide de seulement deux styles en ligne, vous pouvez faire l'ajustement reCAPTCHA bien sur votre appareil mobile:

<div class="g-recaptcha" 
data-theme="light" 
data-sitekey="XXXXXXXXXXXXX" 
style="transform:scale(0.77);transform-origin:0 0"> 

`