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

[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

[石川＠Vektor,Inc.]

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

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

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

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

[yunahana]

kurudrive 様

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

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

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

[石川＠Vektor,Inc.]

何か書き方が間違っているか、
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つをご紹介

[yunahana]

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

生前対策の必要性

[石川＠Vektor,Inc.]

@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 の開始、終了を見直してみてください。

[yunahana]

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

[yunahana]

kurudrive 様

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

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

[投稿者]

投稿