- このトピックには2件の返信、2人の参加者があり、最後に
により2年前に更新されました。
-
投稿
-
お世話になっております。
snowmonkeyを使ったサイトにフォームを入れたいのですが、CSSが反映しません。
snowmonkeyの問題ではありませんが、自分自身ではなぜ反映しないかわからないので、可能であれば、教えていただけますと幸いです。
【お使いの Snow Monkey のバージョン】Snow Monkeyバージョン: 16.5.4
【お使いのブラウザ】chromeバージョン: 107.0.5304.87（Official Build） （arm64）
【当該サイトのURL】
### 実現したいこと
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だけで他に追記されているものはありません。いいねをした人: 居ませんまず、こちらのサイトは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を当てたい要素を特定して記述してみてください。いいねをした人:
@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を使用されているようですが、デモの提示用として利用されているのでしょうか？
おっしゃるように掲示用として記載させていただきました。
半分諦めていたので、大変助かりました。
いいねをした人:
- トピック「cssを追記してimpotantwo反映しない」には新しい返信をつけることはできません。