[ 解決済 ] Lightning Skin Paleの.mainSection

[RocK参加者]

WordPress：バージョン 5.2.3
拡張デザインスキン：Lightning Skin Paleバージョン 2.5.0

.mainSectionへbox-shadowを追加するとPCでは表示されますが、モバイルでは適応されません。
サイドバーの.subSectionではPC・モバイル共に正常に機能します。

.mainSection{
box-shadow: 7px 7px 8px rgba(0,0,0,0.3);
}
.subSection{
box-shadow: 7px 7px 8px rgba(0,0,0,0.3);
}

id・classなどがあれば教えて頂きたいです。
宜しくお願い致します。

[RICK参加者]

PCでブラウザの横幅を狭めていけばわかると思いますが・・・
（デモサイトと開発者ツールで確認しました。）

768px以上の場合は.mainSectionの両端に余裕があるのでbox-shadowが反映されますが、
767px以下の場合.mainSectionの両端が画面両端にひっついてしまいます。

そのため、コードとしては反映されるものの、box-shadowを反映する領域がないため
反映されていないと思われます。

逆に.subSectionは767px以下でも両端に余裕があるので反映されているのでしょう。

[RocK参加者]

RICKさんご回答ありがとうございます。
やはりそうなんですね。
デベロッパーツールで何となくそんな気はしてました…..
.mainSectionのbox-shadowはあきらめた方がいいですかね～？

[RICK参加者]

下記の様に767px以下のときの.mainSectoonに
左右のmarginやらpaddingやらを付加すればできそうな気がします。

@media (min-width: 767px) {
    .mainSection{
        margin: 0 10px;
    }
}

[RocK参加者]

いろいろ、ありがとうございます。
下記でできました。

@media (max-width: 767px) {
.mainSection{
margin: 0 10px;
}
}

また何かありましたら、宜しくお願い致します。
ありがとうございまいたした。

[投稿者]

投稿