contactform7横幅を整えてスマートフォンでの表示を最適化
多くの方が導入されているcontactform7。
カスタマイズに優れていてとても便利ですよね。
このブログでも使っていますが、STINGER5にデフォルトで導入するとスマートフォンで表示した際にテキストエリアがはみ出てしまい、スクロールした際に横へもスクロールしてしまう現象を修正した手順を参考までに書いておきます。
コンタクトフォームの編集
お問い合わせ→コンタクトフォーム→編集とクリックしてフォームへ下記をコピペ。
[text]
お名前 (必須)
[[text* your-name class:form-width]]
メールアドレス (必須)
[email* your-email class:form-width]
題名
[[text your-subject class:form-width]]
メッセージ本文
[textarea your-message class:form-width]
[submit "送信"]
[/text]
CSSの編集
外観→CSS編集を選択して下記コードを記述
[css]
.form-width {
max-width: 100%;
}
[/css]
以上のカスタマイズで横幅が最適化されてスマートフォンでの横スクロールがなくなりました！！