WordPress Contact Form 7 スマートフォン使用時 はみ出るテキストエリアを修正

CSS

blue-jWordPressのプラグイン「Contact Form 7」はとても便利だ。

非常に簡単に問い合わせフォームを作ることが出来る。

そのまま実装してもいいのだが、僕はtableを使って(レスポンシブ)表示している。

ただこのContact Formに欠点があった。

PCで横幅を狭めて見た際、横幅ぴっちり表示されているのだが、 スマートフォン(僕のはiPhone)で見たらなぜかtableが右横に伸びてしまう。

「なんでじゃ!!」と四苦八苦していると、どうやらContact Form内のテキストエリアが邪魔をしていると考えた。

これはあるCSSを入れたら簡単に修正出来たのでここに記しておく。

 


スマートフォン用のCSSに

と記入するだけでスマートフォンでみても横幅ピッタリになった。 

割と冷や汗をかきました。 

コメント

タイトルとURLをコピーしました