CSSカスタマイズがスマホでは反映されない

VWSとは フォーラム Lightning CSSカスタマイズがスマホでは反映されない

CSSカスタマイズがスマホでは反映されない

  • このトピックには7件の返信、2人の参加者があり、最後にyunahanaにより5年、 10ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #14534

    yunahana
    参加者

    お世話になっております。

    現在、Fortでサイトを3つ運営しておりますが、今年作成したサイトだけ「ExUnit⇒CSSカスタマイズ」したものがパソコンでは変更されましたがスマホでは反映されません。
    何か間違えていますでしょうか?
    ご教授お願いいたします。

    /* 見だしh2の高さ等の設定 */
    @media (min-width: 992px){
    .h2-title, .mainSection h2, .mce-content-body h2, .subSection .subSection-title {
    padding: .6em 0.5em .5em;
    border-top: 2px solid #337ab7;
    }
    }

    /* 見だしh3の設定 */
    @media (min-width: 992px){
    .mainSection h3, .mce-content-body h3 {
    padding: .1em;
    border-top: none;
    border-bottom: 2px dotted #0038aa;
    font-size: 26px;
    }
    }

    当サイト環境
    Lightning Proバージョン: 0.7.3
    Lightning Child Sampleバージョン: 0.1.2
    デザインスキン:Fort

    #14554
    @media (min-width: 992px){
    }

    ↑ 画面サイズ 992px 以上でのみ有効にする指定です。
    スマホでも反映させる場合は外して試してみてください。

    以上よろしくお願いいたします。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    #14555

    yunahana
    参加者

    kurudrive 様

    お返事ありがとうございます!

    始めは、
    @media (min-width: 992px){
    }
    無しで記述していたのですが、反映されないので追記していました。

    先ほど削除してみましたが、やはりスマホでは反映されません…
    ブラウザの設定から履歴データの削除もスマホの方でもやってみましたが、反映されません…
    他の原因は何か考えられますでしょうか?

    #14556

    何か書き方が間違っているか、
    CSSの指定が元の指定に負けて上書きできていないのだと思います。

    h3 { font-size:12px; }
    h3 { font-size:14px; } /* 後に書いた(読み込まれた)方が適用される */
    body .siteContent h3 { font-size:16px } /* 親要素から複数書いてある方が強い */
    h3 { font-size:12px }

    このあたりは該当サイトのURLを直接見ないとちょっと判断できません。

    ↓ に記載の Chromeのデベロッパーツールなどを使えば、どうして効いてないのか原因を確認する事ができます。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    知る人ぞ知るかも!? Google Chrome デベロッパーツールの便利機能3つをご紹介

    #14557

    yunahana
    参加者

    申し訳ありませんが、該当テストサイト見て頂けますでしょうか?
    よろしくお願いいたします。m(_ _)m

    生前対策の必要性

    #14559
    @media (min-width: 992px) {
        .col-md-offset-1 {
            margin-left: 2.33333333%;
        }
    
        @media (min-width: 992px) {
            .col-md-8 {
                width: 71.66666667%;
            }
    
            @media (min-width: 992px) {
                .col-md-3 {
                    width: 26%;
                }
    
                /* 見だしh2の設定 */
                h2 {
                    font-size: 30px;
                }
    
                /* 見だしh2の高さ等の設定 */
                .h2-title, .mainSection h2, .mce-content-body h2, .subSection .subSection-title {
                    padding: .6em 0.5em .5em;
                    border-top: 2px solid #337ab7;
                }
    以下略

    みたいに
    @media (min-width: 992px) {
    が入れ子で複数書いてあり、その中に書いてあるので、
    スマホでは効かないようになっています。

    @media (min-width: 992px) {
      .col-md-offset-1 {
        margin-left: 2.33333333%;
      }
      .col-md-8 {
        width: 71.66666667%;
      }
      .col-md-3 {
        width: 26%;
      }
    }
    
    /* 見だしh2の設定 */
    h2 {
      font-size: 30px;
    }
    
    /* 見だしh2の高さ等の設定 */
    .h2-title, .mainSection h2, .mce-content-body h2, .subSection .subSection-title {
      padding: .6em 0.5em .5em;
      border-top: 2px solid #337ab7;
    }

    @media の開始、終了を見直してみてください。

    #14560

    yunahana
    参加者

    ありがとうございます!
    見なおしてみます。

    #14561

    yunahana
    参加者

    kurudrive 様

    私の注意不足でお手間をとらせてしまい、本当にすみませんでした!
    @media の開始、終了を見直し、無事にスマホでも反映いたしました。

    本当に助かりました!
    ありがとうございましたm(_ _)m

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