contact7 横幅変更に関して

Contact Form 7については、
https://ja.wordpress.org/support/topic-tag/contact-form-7/
で聞くか
https://www.google.com/search?q=Contact+Form+7%E3%80%80%E6%A8%AA%E5%B9%85%E5%A4%89%E6%9B%B4&sxsrf=ALeKk01fJOxGrMG7_eHkDMPxeeRc97qyhg%3A1627300478065&ei=fqL-YKKwA6S2mAXSpLmIBA&oq=Contact+Form+7%E3%80%80%E6%A8%AA%E5%B9%85%E5%A4%89%E6%9B%B4&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEM0CMgUIABDNAjIFCAAQzQI6BwgjELADECc6BQghEKABSgQIQRgBUIcNWIwXYMYeaABwAHgAgAGTA4gB1hSSAQkwLjEuNy4xLjGYAQCgAQGqAQdnd3Mtd2l6yAEBwAEB&sclient=gws-wiz&ved=0ahUKEwii57_X1oDyAhUkG6YKHVJSDkEQ4dUDCA8&uact=5
で記事を探せば、答えが書いてあります。

＠石川＠Vektor,Inc.様、

そうなんですね。詳しくコードを見ていませんでした。

＠中村誠様、

Lightningと関係ない、使用プラグインの質問かと思い、そちらへ誘導する回答をしてしまいました。
失礼しました。

text-align: center; は フォーム内のテキストの指定なので、
フォーム自体を中央にしたい場合は

margin-left:auto;
margin-right:auto;

を追加すれば良いと思います。

添付の設定と追加の仕方で間違いないでしょうか。

margin-*** の設定は { と } の間に入れないといけませんので、以下の書き方が正しいです。

.wpcf7-form-control.form-control {
width: auto;
margin-left:auto;
margin-right:auto;
}

【以下、追記です】

上記の CSS だと、入力欄だけ中央に配置されてしまいますね。

それから、スマホで表示すると入力欄が画面からはみ出してしまいますので、以下のようにするのがよさそうです。

@media (min-width: 768px) {

.wpcf7-form-control.form-control {
width: auto;
}
.wpcf7-form {
max-width: 680px;
margin-left:auto;
margin-right:auto;
}

}

• この返信は3年、 3ヶ月前に対馬 俊彦が編集しました。理由: CSS 見直し

CSSについては下記にも記載していますので、一度ご確認の上試してみてください。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説