Lightning Skin Paleの.mainSection

タグ: Lightning Skin Pale

このトピックには4件の返信、2人の参加者があり、最後にRocKにより5年、 10ヶ月前に更新されました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

投稿者

投稿
2019年9月11日 11:11 AM #20254

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などがあれば教えて頂きたいです。
宜しくお願い致します。

2019年9月11日 1:51 PM #20272

DRILL LANCER
モデレーター

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

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

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

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

2019年9月11日 2:35 PM #20275

RocK
参加者

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

2019年9月11日 2:52 PM #20277
DRILL LANCER
モデレーター
下記の様に767px以下のときの.mainSectoonに
左右のmarginやらpaddingやらを付加すればできそうな気がします。
```
@media (min-width: 767px) {
    .mainSection{
        margin: 0 10px;
    }
}
```
2019年9月11日 3:18 PM #20278

RocK
参加者

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

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

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

投稿