Vektor WordPress Solution
VWSとは › フォーラム › Lightning › Lightning Skin Paleの.mainSection
タグ: Lightning Skin Pale
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などがあれば教えて頂きたいです。 宜しくお願い致します。
PCでブラウザの横幅を狭めていけばわかると思いますが・・・ (デモサイトと開発者ツールで確認しました。)
768px以上の場合は.mainSectionの両端に余裕があるのでbox-shadowが反映されますが、 767px以下の場合.mainSectionの両端が画面両端にひっついてしまいます。
.mainSection
box-shadow
そのため、コードとしては反映されるものの、box-shadowを反映する領域がないため 反映されていないと思われます。
逆に.subSectionは767px以下でも両端に余裕があるので反映されているのでしょう。
.subSection
RICKさんご回答ありがとうございます。 やはりそうなんですね。 デベロッパーツールで何となくそんな気はしてました….. .mainSectionのbox-shadowはあきらめた方がいいですかね~?
下記の様に767px以下のときの.mainSectoonに 左右のmarginやらpaddingやらを付加すればできそうな気がします。
.mainSectoon
margin
padding
@media (min-width: 767px) { .mainSection{ margin: 0 10px; } }
いろいろ、ありがとうございます。 下記でできました。
@media (max-width: 767px) { .mainSection{ margin: 0 10px; } }
また何かありましたら、宜しくお願い致します。 ありがとうございまいたした。