CSSの書き方が間違っている為、見直してほしいです。

http://twotic.online/registration/
リンク先のページでのお願いです。

このページの青字で書かれた、
”アカウント詳細”と”プロフィール詳細”がスマホで見ると大き過ぎるので小さくしようと
cssを書いたのですが、

@media screen and (max-width:768px) {
   .basic-details-section.register-section{
  h2 { font-size: 20px; }
}
}

@media screen and (max-width:768px) {
   .profile-details-section.register-section{
  h2 { font-size: 20px;
      margin-top: .65em;
     }
}
}

と書いたのですが反映されません、何が間違えているのでしょうか？

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

回答2件

ベストアンサー

html
1<div class="register-section" id="basic-details-section">
2    <h2>アカウント詳細</h2>
3</div>

こうなっているんだから、

css
1    #basic-details-section  h2 {
2        font-size: 20px;
3    }

あと、メディアクエリの　@media screen and (max-width:768px) の部分、max-width の値が一緒で区別してない。

投稿2017/10/28 13:37

退会済みユーザー

総合スコア0

facebook

2017/10/28 16:06

ありがとうございます。無事に反映させることができました。メディアクエリは右側の"プロフィール詳細”を下に周り込ませるために一緒にしておきました。

退会済みユーザー

2017/10/28 16:09

一緒にするんじゃ何の意味もないでしょ。

facebook

2017/10/29 06:20

意味不明な発言してました。下に周り込ませたがfloatのせいで２カラムの幅を維持していたので、 @media screen and (max-width:768px) { #profile-details-section { width: 100% !important; } } と、widthを広げて処理していました。そうしたことをmax-width:768pxと混同して意味不明発言をしてしまっていました。なので、「max-width の値が一緒で区別してない。」も理解できていません。表示には問題ないように見えるのですが、これはどうすればいいのでしょうか？

退会済みユーザー

2017/10/29 06:30

そもそも、max-width　が何を意味し、どんな役割がありかを理解していませんよね。まずはそこを調べましょう。 https://techacademy.jp/magazine/9369

facebook

2017/10/29 07:50

そのリンク先などを読み768px以下の幅の場合に適応されるということだと理解して設定してました。スマホだけに適応させたかったので。ではないのでしょうか？

退会済みユーザー

2017/10/29 08:00 編集

そうじゃなくて、 @media screen and (max-width:768px) {　という条件、一緒なんだから、分けずにまとめて書こうよってこと。分けることが必要なら、768 ともう一方は異なる値じゃないとおかしいでしょ？ってこと。

facebook

2017/10/30 06:02

理解できました。知識がないため検索して得たものをコピペって無難に数値だけ置き換えてたため、応用ができずにそのようなことになっていました。ですよね。全く見えていませんでした。すっきり解決することができました。今回は色々とありがとうございました。