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

Article views401 VIEW

b1f84567 s - Wordpress Contact Form 7 スマートフォン使用時 はみ出るテキストエリアを修正WordPressのプラグイン「Contact Form 7」はとても便利だ。

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

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

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

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

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

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

 


スマートフォン用のCSSに

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

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

Pocket
pinit fg en rect gray 28 - Wordpress Contact Form 7 スマートフォン使用時 はみ出るテキストエリアを修正
line88x20 - Wordpress Contact Form 7 スマートフォン使用時 はみ出るテキストエリアを修正
[`evernote` not found]

Leave a Comment

CAPTCHA