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

Question

前提・実現したいこと

RailsでLPのレスポンシブ対応を行いたいですのですが、特定の部分でメディアクエリが効かず困っております。

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

４つのブロックをPC表示では横一列に並べて表示しているところを、スマホ表示では２列×２行で表示させようとしています。
CSSの中にメディアクエリを記載することで実現しようとしているのですが、スマホ表示のcssが反映されておりません。GoogleChromeの検証ツールで確認してみると、スマホ表示のメディアクエリのCSSが横棒で消されている？ことになっていてPC表示のcssが効いているようです。
他の部分のメディアクエリは効いているため、自分のコードに問題があると思うのですが調べても解決できずアドバイスを頂けますと幸いです。

該当のソースコード

--------HTMLのソースコードです------------------------------------------------------------------
<div class="features-four">
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">勤怠</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
従業員の業務時間が視える事で</br>
働き方改革関連法における、</br>
労働時間の把握義務への対応</br>
が可能です。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">業務</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
繰り返し業務や単純作業が</br>
視えることで、誰がどのくらい</br>
対象の業務をやっているかを</br>
把握することができるため、</br>
業務効率化が検討できます。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">セキュリティ</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
USBなどの外付けハード機器に</br>
誰が、どのデータを入れたか、</br>
把握することができるため、</br>
情報流出の管理に繋がります。</span></p>
</div>
<div class="feature">
<p><span class="feature-title" style="font-family: 'MS UI Gothic',sans-serif; font-weight: bold; color: #00008b;">IT資産</span></br>
<span clas="feature-text" style="font-family: 'MS UI Gothic',sans-serif; letter-spacing: 2px;">
使用するPC端末に入っている</br>
セキュリティ関連のソフトの</br>
バージョン情報が視えることで</br>
端末の一元管理にも繋がります。</span></p>
</div>
</div>
---------------CSSのソースコードです。----------------------------------------------------------
（CSS）
div.features-four{
display: flex;
justify-content: space-around;
margin: 2.5% 0 2.5% 0%;
}
@media screen and (max-width: 768px){
div.features-four{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}

試したこと

・ブレイクポイントが間違っているかと思い、メディアクエリ部分のmax-widthの値を修正してみましたが変化はなくブレイクポイントの設定は正しいようです。
・PC表示のcssコードにはメディアクエリを記載していなかったので下記のようにPC表示の部分にもメディアクエリを記載してみましたが変化はなかったです。

@media screen and (min-width: 1000px){
div.features-four{
display: flex;
justify-content: space-around;
margin: 2.5% 0 2.5% 0%;
}
}
@media screen and (max-width: 768px){
div.features-four{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}

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

Answer 1

こちらで試したところ、問題なくレスポンシブの実装ができているようでした。

例えば以下の場合、メディアクエリ内で指定した背景色「赤」は無視され、
メディアクエリの前の背景色「青」のままになります。

html body div.features-four {
  background: blue; /* 青 */
}
@media screen and (max-width: 768px) {
  div.features-four {
    background: red; /* 赤 */
  }
}  

メディアクエリ内のCSSセレクタの詳細度が、
メディアクエリの前に記述されているものを上回らないと上書きされません。

メディアクエリの記述を問題なさそうなので、「CSSセレクタの詳細度」に注目して調べてみると解決できるかもしれません。

---

また、別の視点として、以下の記述もヒントになるかもしれません。

@media screen and (max-width: 768px) {
  .feature {
    flex: 0 0 50%;
  }
}

Comments

[rubyprogram]

new 1 ro さん
ありがとうございます。
セレクタの詳細度について調べてみました。
ふわっとでしか理解していなかったので改めて勉強する良いきっかけになりました。
またCSSコードについては.featureを以下に変更するとメディアクエリが効くようになりました！
@media screen and (max-width: 768px){
.feature{
flex: 0 0 50%;
}
}

自分の認識がまだ間違っているかもしれませんが、
今回の件は.features-fourの子要素（.feature）の記載が上回ったことで.features-fourのメディアクエリが効くようになった、ということになりますでしょうか？

[new1ro]

混乱させてしまったかもしれません。
「flex: 0 0 50%;」については、セレクタの詳細度とは関係がないです。

「50%」と記載しているのは、横幅50%、というような意味です。
display: flex;を使う場合、子要素に「flex: 0 0 300px;」や「flex: 1 1 0%;」というような記述をする必要があります。今回がその例です。「flex」について調べてみることをおすすめします。

> またCSSコードについては.featureを以下に変更するとメディアクエリが効くようになりました！
メディアクエリはもともと効いていたものの、画面幅768px以下のときに「横2つ並びにするための記述がなかった」ため、横2つ並びになっていなかった、というのが正しい理解です。

[rubyprogram]

なるほどです。
display: flex;を使った横並びの記載に問題があったんですね。
flexについて理解が足りてなかったので深堀して調べてみます！
ご丁寧にありがとうございます。