WordPress プラグイン Contact From 7 コンテンツが画面の幅を超えていますの対処法

 Wordpress でコンタクトフォーム(お問合せ入力欄)を設置したいときに便利で一番有名なプラグイン Contact From 7 を設置後、Google search Console モバイルユーザービリティに「コンテンツが画面の幅を超えています」と怒られた時の対処法です。

モバイル限定のエラー警告なので、まずはスマートフォンの画面で確認してみましょう。

 どうでしょうか?Googleに怒られたあなたなら、きっとフォームの右端が見切れているのではないでしょうか?

 じゃあ、Googleで検索して解決方法を探そう!ということで得た知識を早速実践するけど・・・・直らない! 

.wpcf7-form-control-wrap{
 max-width:100%;
}

こんなコードではありませんでしたか?これでは直りません。セレクターが間違えているのです。

セレクターはどのHTMLのどの部品にデザインを当てるかを指定する物です。

正しい指定

子テーマのCSSに以下の記述を追記してください。
※間違えても親テーマのCSSやプラグインのCSSに記述しないでください。

.wpcf7 input:not([type="submit"]), .wpcf7 textarea{
  width: 100%;
}

解説

wpcf7クラスのinputタグ(submitボタン以外)の幅を100%指定します。
同様にtextareaも指定します。


上位ブロックににmax-widthを指定はinputタグにデフォルトで指定されているので意味がありません。


またHTMLタグにサイズ指定されているのがミソですね!
これでレスポンシブ対応になっているはずなので、試してください。

もしそれでも直らなくても諦めないで!Twitterで聞いてもらえたらすぐにお返事できますよ!

ryusaiTwitter


活用してくださいね!