[Yuzuru Kuroishi]

お世話になっております。

snowmonkeyを使ったサイトにフォームを入れたいのですが、CSSが反映しません。

snowmonkeyの問題ではありませんが、自分自身ではなぜ反映しないかわからないので、可能であれば、教えていただけますと幸いです。

【お使いの Snow Monkey のバージョン】Snow Monkeyバージョン: 16.5.4

【お使いのブラウザ】chromeバージョン: 107.0.5304.87（Official Build） （arm64）

【当該サイトのURL】

form

Just another WordPress site

practical-wilson3990.on.getshifter.io

### 実現したいこと
cssを反映して、スマホ表示の時の数字を大きくしたり、
赤字にしたりしたい。

### 発生している問題
既存のCSSが優先され、カスタマイズが無効化されてしまう。

### 試したこと
@media screen and (min-width: 782.001px)
.wq-Form .wq-Monitor.wq-is-sidebar .wq–entries>.wq–entry:not(.wq-for-header)>.wq-for-category {
font-size: 16px !important;
}
を外観の追加CSSに書き込みました。追加しているのはこのCSSだけで他に追記されているものはありません。

♥ 0

いいねをした人: 居ません

[GONSY]

form

Just another WordPress site

practical-wilson3990.on.getshifter.io

まず、こちらのサイトはShifterを使用されているようですが、デモの提示用として利用されているのでしょうか？
Shifterは、WordPressの静的化するサービスなので、フォームなどの動的なものは動きません。
　

### 発生している問題
既存のCSSが優先され、カスタマイズが無効化されてしまう。

ソースを見てみると、追記したCSSは存在しないようです。
　

### 実現したいこと
cssを反映して、スマホ表示の時の数字を大きくしたり、
赤字にしたりしたい。

@media screen and (min-width: 782.001px)
	.wq-Form .wq-Monitor.wq-is-sidebar .wq–entries>.wq–entry:not(.wq-for-header)>.wq-for-category {
		font-size: 16px !important;
	}

スマホ表示とのことですので、一般的には

@media screen and (max-width: 768px) {
	/*ここにスマートフォン用のCSSの記述*/
}

min-width ではなく max-widthを使用してみてください。

@Yuzuru Kuroishi さんが追記したCSS・・・
.wq-Form .wq-Monitor.wq-is-sidebar .wq–entries>.wq–entry:not(.wq-for-header)>.wq-for-category
ですが、Chromeの検証ツールでみたところ、.wq-is-sidebar（クラスセレクター）が存在していないようです。
いま一度CSSを当てたい要素を特定して記述してみてください。

♥ 2

いいねをした人:

[Yuzuru Kuroishi]

@media screen and (max-width: 768px) {
/*ここにスマートフォン用のCSSの記述*/
}

.wq-is-sidebar（クラスセレクター）が存在していないようです。
いま一度CSSを当てたい要素を特定して記述してみてください。

 

GONSY様、アドバイスありがとうございました。

 

@media screen and (max-width: 782px)
.wq-is-sidebar .wq-Form .wq-Monitor>.wq–entries>.wq–entry:not(.wq-for-header)>.wq-for-unitPrice {
font-size: 16px !important;
}

アドバイスを参考に上記に変更してみたところ、カスタマイズが反映しました。.wq-is-sidebarがないのが原因だったようです。

 

まず、こちらのサイトはShifterを使用されているようですが、デモの提示用として利用されているのでしょうか？

おっしゃるように掲示用として記載させていただきました。

半分諦めていたので、大変助かりました。

♥ 1

いいねをした人:

[投稿者]

投稿