【WordPress】Contact Form 7プラグインのフォーム(box)の幅をレスポンシブテーマに合わせる

contact_form_7

あまり見ないお問い合わせ。ふとスマホで覗いてみたらはみ出てる!! ということで、今回フォーム(box)の幅をレスポンシブさせました。


Contact Form 7プラグインのフォーム(box)の幅をレスポンシブテーマに合わせる


お問い合わせの定番WordPressプラグインですね。ありがたく使わせてもらっています!!


/* contact  form 7*/
.wpcf7-form input{width: 80% !important;}  /*名前orメールor題名*/
.wpcf7-form textarea{width: 80% !important;} /*本文*/
.wpcf7-form .wpcf7-submit{width: 80px !important;} /*送信ボタン*/
Contact Form 7のcssに記載するのではなく、テーマ本体のcssの記載してください。

ポイントとしてはいろいろなデバイスに合わせたいため、widthをpxではなく%で合わせたほうがいいと思います。


これでどのデバイスで見ても80%表示されている予定ですwww



あとは、テーブルをなんとか良い方法を見つけなくては!!

シェアする

フォローする

『【WordPress】Contact Form 7プラグインのフォーム(box)の幅をレスポンシブテーマに合わせる』へのコメント

  1. […] ど、これを使うと全部同じ幅で揃って「整列!」って感じになるので、気に入りました。   ↓ 【WordPress】Contact Form 7プラグインのフォーム(box)の幅をレスポンシブテーマに合わせる […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です