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

前提・実現したいこと

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:0522117921" 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/ツールのバージョンなど）

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

kei344

2020/04/09 15:03

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

rubyprogram

2020/04/09 16:14

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

kei344

2020/04/09 16:16

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

rubyprogram

2020/04/09 16:48

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

kei344

2020/04/09 16:57

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

rubyprogram

2020/04/09 16:58

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

maisumakun

2020/04/09 19:15

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

退会済みユーザー

2020/04/09 23:48

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

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

CSS
1p.tel-number a {
2    font-size: 200%;
3    text-decoration: none;
4    margin-left: 10px;
5    
6    background: #f00; /* 確認のため追加 */
7}
8@media screen and (max-width: 1024px){
9    p.tel-number a{font-size: 140%;}
10
11    background: #ff0; /* 確認のため追加 */
12}       
13@media screen and (max-width: 896px){
14    p.tel-number a{font-size: 150%;}
15
16    background: #0f0; /* 確認のため追加 */
17}      
18@media screen and (max-width: 768px){
19    p.tel-number a{font-size: 140%;}
20
21    background: #0ff; /* 確認のため追加 */
22}