モバイルデバイス用のリサーチ/スタイリング

Question

現在、フォーム内のreCaptchaエレメントのサイズ変更（またはスタイリング）に苦労しています。モバイルデバイス（縦向き）でフォームを表示すると、ちょっとハングしてかなりかすかに見えます。

フォームはformstackにあり、スクリプトによってレンダリングされます。私はCSSを使ってフォームの他のすべての要素をスタイルし、何も問題なくjQueryを使ってプレースホルダ属性を各入力に追加することができました。しかし、一度私がreCaptchaブロックに着くと、これらのオプションのどちらも機能していないようです。私が望む結果を得るためにChromeの開発ツールを直接変更することはできましたが、CSSやjQueryでこれらを適用してもどちらもうまくいきませんでした。私もthese google recaptcha docsを見てきましたが、これは同じ種類ではありません...代わりに、this is what I'm working with。

だから、私は次に試してみたいことや解決策を探す場所がわからない。

個々の要素を対象にしてサイズを変更しようとしましたが、これだけで要素の背景を削除しようとしました。

誰かに同様の問題がありましたか？コードが必要な場合、私はそれを提供します、それはちょうど上記のスクリプトによってレンダリングされたかなりのコードです。それがなければどこに間違っているのかを示唆することは難しいかもしれないと理解していますが、誰かが別の選択肢を提案できるかどうかは分かりませんでしたか？

ありがとうございます！

Answer 1

reCAPTCHAの規模全体を変更することで幅を変更できるCSSトランスフォームプロパティを使用します。あなたのモバイルデバイス上でうまくreCAPTCHAのフィットを作ることができますちょうど2つのインラインスタイルの助けを借りて

：

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

`