VWSとは フォーラム Lightning [ 解決済 ] Lightning Skin Paleの.mainSection

[ 解決済 ] Lightning Skin Paleの.mainSection

このトピックには4件の返信が含まれ、2人の参加者がいます。2 ヶ月、 1 週前 RocK さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #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などがあれば教えて頂きたいです。
    宜しくお願い致します。

    #20272

    RICK
    参加者

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

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

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

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

    #20275

    RocK
    参加者

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

    #20277

    RICK
    参加者

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

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

    RocK
    参加者

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

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

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

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

このトピックに返信するにはログインが必要です。