WPFormsで作ったフォームの段落テキスト項目の表示幅をPCとスマホ、それぞれで調整したい

Question

WORD PRESSのWPForms（無料版）でお問い合わせフォームを作っています。
デフォルトの状態でフォームを作成すると段落テキスト項目だけ横に100%の幅で表示されてしまい体裁がよくありません。そこでフォームのIDと段落テキスト項目のIDを指定して表示幅を60%に調整するコードをCSSに追加してみました。

追加したコードは以下の通りです。

#wpforms-1316-field_6-container {
    width: 60%!important;
}

上記コードを追加してPCでの表示は問題なくなったのですが、スマホ表示では段落テキストの項目だけ60%になってしまい不格好です。

PC表示では60%、スマホ、タブレット表示では100%表示にできるコードはどのように書けばよろしいでしょうか。なにとぞよろしくご教示ください。

Comments

[MomenToufu]

細かくてすみませんが、付与しているタグのうち「WPF」は Windows Presentation Foundation のことではないでしょうか？

[AKIAKO]

申し訳ありません。よくわからずWPFormsかと思ってしまいました。

Answer 1

メディアクエリーを使ってはどうでしょうか

@media (min-width: 600px) { /*windowサイズが600px以上の時に適用*/
	#wpforms-1316-field_6-container {
		width: 60%!important;
	}
}

Comments

[AKIAKO]

早速ありがとうございました！
希望していた通りのものができました。本当に感謝しております！