VWSとは › フォーラム › Lightning › Lightning Skin Paleの.mainSection

Lightning Skin Paleの.mainSection

タグ: 

  • このトピックには4件の返信、2人の参加者があり、最後にRocKにより9ヶ月、 3週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • 2019年9月11日 11:11 午前 #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 午後 #20272

    DRILL LANCER
    モデレーター

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

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

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

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

    2019年9月11日 2:35 午後 #20275

    RocK
    参加者

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

    2019年9月11日 2:52 午後 #20277

    DRILL LANCER
    モデレーター

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

    @media (min-width: 767px) {
    .mainSection{
        margin: 0 10px;
    }
}
    2019年9月11日 3:18 午後 #20278

    RocK
    参加者

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

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

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

  • 投稿者
    投稿
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。