contact formのレスポンシブと中央・左寄せ

Question

前提・実現したいこと

wordpressのcontact form7で、スマホなどで見るとフォームの幅が狭くなってしまいます。
スマホなどのような特に画面が小さいデバイスで見たときにフォームを幅100%にするにはどうしたらよいでしょうか。

.wpcf7-form p {
text-align: center;
}
また、↑のようにすると全部が中央寄せになるのですが、「名前」「メールアドレス」などの表記のみをフォームの左寄せにするにはどうしたら良いですか。

よろしくお願いします。

該当のソースコード

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-tel"],
.wpcf7 input[name="your-subject"] {
width: 60%; !important;
}

.wpcf7 textarea[name="your-message"] {
width: 60%;
height: 200px !important;
}

.wpcf7-form p {
text-align: center;
}

Answer 1

widthの!importantは消した上で下記を追加

@media screen and (max-width: 640px) {
	.wpcf7 input[name="your-name"],
	.wpcf7 input[name="your-email"],
	.wpcf7 input[name="your-tel"],
	.wpcf7 input[name="your-subject"] {
		width: 100%;
	}
	.wpcf7 textarea[name="your-message"] {
		width: 100%;
		height: 200px !important;
	}
}

詳しくはメディアクエリなどのワードで検索すれば良いでしょう
ブレイクポイントは調整してください。