[ 解決済 ] Contact Form 7で独自にカスタマイズした装飾部分を揃えたい

[大嶋のぞみ]

■ WordPress のバージョン
5.9.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.18.1

■ Pro Unit のバージョン
0.17.1

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
お問い合わせフォームをContact form7で設置しましたが、CSSが若干崩れてしまいます。
左側の「必須」の文字を揃えたいです。

■ 自分で試した事
ネットで拾ってきた以下のCSSを該当ページの「カスタムCSS」に貼り付けました。
ちなみに、プラグイン「VK All in One Expansion Unit」を停止すると、
添付2の画像のようになりました。

/*ContactForm7カスタマイズ*/
table.CF7_table{
width:80%;
margin:0 auto;
border: 3px solid #e5e5e5;
}

table.CF7_table tr{
border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
color:#797979;
}

/*「必須」文字*/
.CF7_req{
font-size:.9em;
padding: 5px;
background: #f79034;/*オレンジ*/
color: #fff;
border-radius: 3px;
margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
font-size:.9em;
padding: 5px;
background: #bdbdbd;/*グレー*/
color: #fff;
border-radius: 3px;
margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
.CF7_table th{
width:30%;/*横幅*/
background-color:#ebedf5;/*ブルーグレー*/
}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
table.CF7_table{
width:95%;
}
.CF7_table tr, .CF7_table td, .CF7_table th{
display: block;
width: 100%;
line-height:2.5em;
}
.CF7_table th{
background-color:#ebedf5;
}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
background-color:#f79034;/* オレンジ*/
border:0;
color:#fff;
font-size:1.2em;
font-weight:bold;
margin:0 auto;
}

.CF7_btn{
text-align:center;
margin-top:20px;
}

.wpcf7-spinner{
width:0;
margin:0;
}

■ 症状が発生するブラウザ
Chrome

■ 実際の症状

Contact

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

.CF7_table th {
    text-align: left;
}

詳細は以下参照ください。

できる！CSSカスタマイズ

[大嶋のぞみ]

ありがとうございます！
Lightning Child Sample: スタイルシート (style.css)
に教えていただいたコードを記載して解決しました！

[投稿者]

投稿