特定のメディアクエリが効かない

Question

前提・実現したいこと

LPをレスポンシブ対応で作成しております。
数か所でレスポンシブが効かない部分が発生しており原因の特定がわからず困っております。

発生している問題・エラーメッセージ

CSS内でメディアクエリを使用しソースコードを書いた場合に、GoogleChromeの検証ツールで確認すると反映されておらず該当のソースコードに斜線が入っている状態です。

該当のソースコード

----------------HTML---------------------------------------------------------------------------

<header class="header">
      <div class="header-wrapper">
        <img src='assets/lookme.png' class="lookme">
        <div class="tel">
          <p class="tel-title">お問い合わせはこちら</p>
          <p class="tel-number"><img src="assets/tel.png" align="bottom" class="tel-image"><a href="tel:[phone]" style="color: #ff367f;">052-211-7921</a></p>
        </div>  
      </div>  
    </header>

--------------CSS------------------------------------------------------------------------------

*{
    box-sizing: border-box;
    width: 100%;
    margin: 0%;
    padding: 0%;
}
html{
    width: 100%;
    height: auto;
}
body{
    width: 100%;
    overflow: scroll;
    word-wrap: break-word;
}
header{
    width: 100%;
    height: 959px;
    background-image: url("top.png");
    background-repeat: no-repeat;
    background-size: cover;
   
      .header-wrapper{
          display: flex;
          justify-content: space-between;
          padding: 3%;
      }
      img.lookme{
          width: 50%;
          max-width: 100%;
          height: 50%;      
      }
      div.tel{
          width: 30%;
          background-color: #dcdcdc;
          padding: 0.5% 2%;
          font-family: 'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
      }
      img.tel-image{
          width: 7%;
          max-width: 100%;
          height: 7%;                
          } 
      @media screen and (max-width: 768px){
          img.tel-image{
              width: 10%;
              max-width: 100%;
              height: 10%;
          }
      }          
      p.tel-title{
            text-align: center;
            font-size: 140%;
      }
      @media screen and (max-width: 768px){
      p.tel-title{font-size: 100%;}
      }
      @media screen and (max-width: 767px){
      div.tel{width: 45%;}
      p.tel-title{font-size: 2.5vw;}
      p.tel-number{font-size: 2.2vw;}
      }          
      p.tel-number a{
          font-size: 200%;
          text-decoration: none;
          margin-left: 10px;
      }
      @media screen and (max-width: 1024px){
          p.tel-number a{font-size: 140%;}
      }       
      @media screen and (max-width: 896px){
          p.tel-number a{font-size: 150%;}
      }      
      @media screen and (max-width: 768px){
          p.tel-number a{font-size: 140%;}
      }
}

補足情報（FW/ツールのバージョンなど）

他のメディアクエリの記載は問題なく反映されており、セレクタ詳細度の問題だと思うのですが自身では解決できておらずアドレス頂けますと幸いです。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[rubyprogram]

kei344さん
見づらくて申し訳ございません。コードブロックを入れさせて頂きましたのでご確認のほど宜しくお願い致します。

[kei344]

コードがCSSではなくSCSSなどSassではありませんか？

[rubyprogram]

kei344さん、仰る通りSCSSになります。SCSSだとメディアクエリの記載方法が変わってくるのでしょうか？

[kei344]

特に詳しくないですが、そもそもの記法自体が違うので記載方法も変わるかもしれません。質問タグに「Sass」を追加することをお勧めします。また、コードブロックの開始部分を「```HTML」「```SCSS」にすると言語にあわせたコードハイライトも利用出来ます。

[rubyprogram]

kei344さん、ありがとうございます。

[maisumakun]

効いていない「数ヶ所」とは、具体的にどこのことでしょうか？

[退会済みユーザー]

なんとなくだが、作成結果のメディアクエリーが優先度低（順序）で作成されてるなな。

Answer 1

どの箇所かわからないので、まずはぼんやりとした回答になります。

• メディアクエリの設定の問題なのか
• メディアクエリの問題と思い込んでいる、通常のCSSの問題なのか

を切り分ける必要が、まずはあります。

以下のように、すべての箇所、
もしくはメディアクエリが効いていない (とrubyprogramさんが思っている) 箇所について
背景色を指定するなど、見た目としてわかりやすい指定をしてみてください。

案外、メディアクエリは実は問題はないものの、別の問題で
メディアクエリが効いていないような挙動をしている場合もあります。

p.tel-number a {
    font-size: 200%;
    text-decoration: none;
    margin-left: 10px;
    
    background: #f00; /* 確認のため追加 */
}
@media screen and (max-width: 1024px){
    p.tel-number a{font-size: 140%;}

    background: #ff0; /* 確認のため追加 */
}       
@media screen and (max-width: 896px){
    p.tel-number a{font-size: 150%;}

    background: #0f0; /* 確認のため追加 */
}      
@media screen and (max-width: 768px){
    p.tel-number a{font-size: 140%;}

    background: #0ff; /* 確認のため追加 */
}

---

↑具体的に何がうまくいっていないのかがよくわからないので、いまのところこのような回答になってしまいます。

例えば以下のように質問に追記すると、より精度の高い回答を得られると思います。

• 現状の画面キャプチャを貼り、こうなってほしいけどできない
• 「p.tel-numbar a」の「font-size」が画面幅〇〇〜〇〇の間で

こうなってほしいけど、現状こういう状態