HTML/CSS メディアクエリの一部が無効化されてしまう

メディアクエリの一部が無効化される

Scssでメディアクエリを設定して読み込まれてはいるのですが、例えばfont-sizeなど一部が反映されておらず
ブラウザで検証を行うとなぜか無効化されていました。検証する際のwidthに間違いはありません。
!importantをつけることで無効化は解除できましたがもっと根本的な対処法はありませんでしょうか？

該当のソースコード

※viewportはHTMLのheadタグ内に記述してあります。
エラーが起きる部分の1例です。(ほかにも複数箇所で同じ問題が見られます)
この場合ブラウザで画面の横幅を375pxなどに設定して検証を行うとメディアクエリが適応されずfont-sizeは45pxになります。
検証で表示されたcssには　~~font-size: 24px;~~　と表示されています。

scss
1.title {
2      font-size: 45px;
3      letter-spacing: 5px;
4      margin: 30px 0;
5}
6
7@media (max-width: 680px) {
8  .top {
9    overflow: hidden;
10  }
11  .title {
12    text-align: left;
13    font-size: 24px; /*ここがブラウザで無効化される*/
14  }
15}

試したこと

メディアクエリ自体読み込まれてはいるので、!importantをつけることで無効化が回避可能なことは確認済みです。
この場合は上記と同じ条件下でfont-sizeは24pxが適用されています。

@media (max-width: 680px) {
  .top {
    overflow: hidden;
  }
  .title {
    text-align: left;
    font-size: 24px !important; /*!importantで無効化を無理やり回避*/
  }
}

補足情報

ブラウザはchromeを使用しています。また、Sassをコンパイルして作成されたcssファイルをhtmlに読み込ませています。

該当コードの全文

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <link rel="stylesheet" type="text/css" href="../CSS/html5resetCSS.css">
9    <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
10
11    <title>Progate</title>
12  </head>
13
14  
15  <body>
16    <header>
17      <div class="header-contents">
18        <div class="header-left">
19          <a href="#page-top"><img src="../img/main_logo.png" alt="Progate-Logo"></a>
20        </div>
21        <div class="header-right">
22          <a href="#lesson">レッスン</a><a href="#">新規登録</a><a href="#">ログイン</a>
23        </div>
24
25      </div>
26    </header>
27
28    <main>
29      <div class="top" id="page-top">
30        <div class="top-contents">
31          <div class="title">
32            <h2>LEARN TO CODE.</h2>
33            <h2>LEARN TO BE CREATIVE.</h2>
34          </div>
35          <p class="message">progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
36          <a href="#page-top" class="signup">新規登録はこちら</a>
37          <p class="or">or</p>
38          <a href="#page-top" class="facebook">F facebookで登録</a>
39          <a href="#page-top" class="twitter">鳥  Twitterで登録</a>
40        </div>
41      </div>
42    </main>
43
44    <section class="lesson-wrapper" id="lesson">
45      <div class="container">
46        <h3>Lesson Where to Get Started!</h3>
47        <div class="lessons">
48          <div class="lesson">
49            <div class="lesson-icon">
50              <img src="../img/html.png" alt="HTML & CSS">
51              <p class="lesson-name">HTML & CSS</p>
52            </div>
53            <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
54          </div>
55          <div class="lesson">
56            <div class="lesson-icon">
57              <img src="../img/jQuery.png" alt="jQuery">
58              <p class="lesson-name">jQuery</p>
59            </div>
60            <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
61          </div>
62          <div class="lesson">
63            <div class="lesson-icon">
64              <img src="../img/ruby.png" alt="Ruby">
65              <p class="lesson-name">Ruby</p>
66            </div>
67            <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
68          </div>
69          <div class="lesson">
70            <div class="lesson-icon">
71              <img src="../img/php.png" alt="PHP">
72              <p class="lesson-name">PHP</p>
73            </div>
74            <p class="lesson-text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
75          </div>
76        </div>
77      </div>
78      
79    </section>
80
81    <section class="message-wrapper" id="message-wrapper">
82      <div class="container">
83        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
84        <h3>Let's learn to code, learn to be creative!</h3>
85        <a href="#message-wrapper" class="last-btn">さっそく開発する</a>
86      </div>
87    </section>
88
89    <footer>
90      <div class="footer-contents">
91        <img src="../img/footer_logo.png" alt="logo">
92        <p>Learn to Code, Learn to be Creative.</p>
93      </div>
94    </footer>
95    
96    
97    
98  </body>
99</html>

Scss
1* {
2  box-sizing: border-box;
3}
4
5html {
6  scroll-behavior: smooth;
7}
8
9body {
10  font-family: "Hiragino Kaku Gothic ProN";
11}
12
13a {
14  text-decoration: none;
15}
16
17
18
19header {
20  width: 100%;
21  height: 65px;
22  background-color: rgba(34, 49, 52, 0.9);
23  position: fixed;
24  top: 0;
25  z-index: 10;
26  .header-left {
27    float: left;
28    img {
29      width: 145px;
30      padding: 20px 0 0 16px;
31    }
32    a {
33      display: block;
34      height: 65px;
35    }
36  }
37  .header-right {
38    float: right;
39    a {
40      padding: 0 25px;
41      display: inline-block;
42      height: 65px;
43      line-height: 65px;
44      color: white;
45      
46      text-decoration: none;
47      &:hover {
48        transition: all 0.5s;
49        background-color: rgb(131, 131, 131);
50      }
51
52    }
53  }
54}
55
56@media all and (max-width: 680px) {
57  .header-right {
58    display: none;
59  }
60}
61
62
63
64.top {
65  background-image: url(https://prog-8.com/images/html/advanced/top.png);
66  background-size: cover;
67  .top-contents{
68    width: 100%;
69    max-width: 1170px;
70    text-align: center;
71    color: rgba(white,0.7);
72    padding: 180px 0 100px;
73    margin: 0 auto;
74    .title {
75      font-size: 45px;
76      letter-spacing: 5px;
77      margin: 30px 0;
78      h2 {
79        margin: 25px 0;
80      }
81    }
82    .message {
83      margin: 16px 0 40px;
84      line-height: 1.5em;
85    }
86    .or {
87      margin: 16px 0 20px;
88    }
89    
90
91    
92  }
93}
94
95@media (max-width: 1000px) {
96  .title {
97    font-size: 32px !important;/*----------問題発生部分-----------*/
98  }
99}
100@media (max-width: 680px) {
101  .top {
102    overflow: hidden;
103  }
104  .title {
105    text-align: left;
106    font-size: 24px !important;/*----------問題発生部分-----------*/
107  }
108  .message {
109    text-align: left;
110    font-size: 14px;
111  }
112  .btn {
113    width: 100%;
114  }
115  .facebook {
116    margin-bottom: 15px;
117  }
118}
119
120@mixin button($color) {
121  padding: 12px 24px;
122  opacity: 0.8;
123  display: inline-block;
124  border-radius: 4px;
125  text-decoration: none;
126  color: white;
127  background: $color;
128  &:hover {
129    opacity: 1;
130  }
131}
132.signup {
133  @include button(#239B76);
134}
135.facebook {
136  @include button(#3b5998);
137  margin-right: 10px;
138}
139.twitter {
140  @include button(#55acee);
141}
142
143.lesson-wrapper {
144  background: #f7f7f7;
145  width: 100%;
146  padding: 0 5% 50px;
147  .container {
148    width: 100%;
149    max-width: 1170px;
150    margin: 0 auto;
151    text-align: center;
152    h3{
153      font-size: 24px;
154      padding: 80px 0 50px;
155      font-weight: normal;
156    }
157    .lessons {
158      display: flex;
159      .lesson {
160        width: 25%;
161        .lesson-icon {
162          position: relative;
163        }
164        .lesson-name {
165          color: white;
166          position: absolute;
167          top: 50%;
168          width: 100%;
169        }
170        .lesson-text {
171          width: 80%;
172          margin: 16px auto;
173          font-size: 13px;
174          color: #b3aeb5;
175
176        }
177        
178      }
179    }
180  }
181}
182
183@media (max-width: 1000px) {
184  .lessons{
185    flex-wrap: wrap;
186    .lesson {
187      width: 50% !important;/*----------問題発生部分-----------*/
188    }
189    .lesson-text {
190      font-size: 15px !important;/*----------問題発生部分-----------*/
191      margin-bottom: 50px !important;/*----------問題発生部分-----------*/
192    }
193  }
194}
195@media (max-width: 680px) {
196  .lessons{
197    .lesson{
198      width: 100% !important;/*----------問題発生部分-----------*/
199    }
200  }
201
202}
203
204.message-wrapper {
205  .container {
206    width: 100%;
207    max-width: 1170px;
208    margin: 0 auto;
209    text-align: center;
210    padding: 80px 0;
211    color: #5f5d60;
212    h2 {
213      font-weight: normal;
214      font-size: 24px;
215      margin: 16px 0;
216    }
217    h3 {
218      font-weight: normal;
219      margin-bottom: 70px;
220      margin-top: 18px;
221    }
222  }
223}
224
225.last-btn {
226  @include button(#5dca88);
227  padding: 15px 40px !important;
228  box-shadow: 0 7px darken(#5dca88,20%);
229  &:active {
230    position: relative;
231    top: 7px;
232    box-shadow: none;
233  }
234}
235
236@media (max-width: 1000px) {
237  .message-wrapper .container {
238    h2 {
239      font-size: 20px;
240    }
241
242  }
243}
244@media (max-width: 680px) {
245  .message-wrapper .container {
246    h3 {
247      font-size: 18.72px;
248    }
249  }
250}
251
252
253footer {
254  width: 100%;
255  border-top: 1px solid #eeeeee;
256  padding: 30px 0 20px;
257  .footer-contents {
258    padding: 0 15px;
259    img {
260      width: 125px;
261    }
262    p {
263      font-size: 12px;
264      color: #b3aeb5;
265    }
266  }
267}
268
269@media (max-width: 1000px) {
270  .footer-contents {
271    text-align: center;
272  }
273}

Lhankor_Mhy

2021/01/26 06:03

無効化された後の値は何になっているのでしょうか？

Lhankor_Mhy

2021/01/26 06:04

また、どのようにしたときに問題が発生したのかをご提示ください。問題が発生する条件を具体的に書きましょう https://teratail.com/help/question-tips#questionTips3-5-3

kentohno

2021/01/26 06:14

言葉足らずで申し訳ありません。指摘された点について追記しましたのでご確認お願いします。

Lhankor_Mhy

2021/01/26 06:18

ご提示のコードを試してみましたが、問題が発生しませんでした。 https://jsfiddle.net/Lhankor_Mhy/6aqy2njm/ ↑上記サンプルで、kentohnoさんの環境では問題が再現しますか？もし、再現しないようであれば、ご提示いただいていない部分に原因があると思いますので、問題が再現するコードをご提示ください。

kentohno

2021/01/26 06:35

上記サンプルでは再現しませんでしたので、コードの全文を追記しました。初学でコードに読みにくい部分があると思いますがご容赦いただけますと幸いです。

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

回答1件

ベストアンサー

このように変更してみてください。詳細度の問題です。

scss
1@media (max-width: 1000px) {
2    .top {
3        .top-contents {
4            .title {
5                font-size: 32px; /*----------問題発生部分-----------*/
6            }
7        }
8    }
9}
10@media (max-width: 680px) {
11    .top {
12        overflow: hidden;
13        .top-contents {
14            .title {
15                text-align: left;
16                font-size: 24px; /*----------問題発生部分-----------*/
17            }
18            .message {
19                text-align: left;
20                font-size: 14px;
21            }
22        }
23    }