iSara模写 ヘッダーのレスポンシブが効かず困っています。

Question

#iSara模写　ヘッダーのレスポンシブが効かず困っています。

初めまして。現在iSaraの模写コーディングを勉強しています。
ヘッダー部分のレスポンシブレイアウトができず、困っています。

現在の状態

※私の模写中　スクリーンショット

※見本ページ
https://isara.life/

７６8ピクセル以下の時に、この「問い合わせ・資料請求はこちら」(div class=contact-s)の部分が非表示になり、代わりに画像＋「資料請求」(div class=contact-s-sm)が表示されるように書き込みました。

が、反映されず、画面を小さくしても「問い合わせ・資料請求はこちら」(contact-s)しか表示されない状態です。

htmlかcssで、何か間違っている部分がないかと思いますが、

どなたか分かる方がいらっしゃれば大変助かります。

#コード

HTML

  <header>
    <div class="header-in">
    <div class="startlogo">
    <img src="isaralogolarge.png" alt="" width=120px >
    </div>
    <p class="txts">バンコクのノマドエンジニア育成講座</p>
    <div class="contact-s">
      <a href="">問い合わせ/資料請求はこちら</a>
    </div>
    <div class="contact-s-sm">
        <img src="https://isara.life/wp-content/themes/isara_v2/img/form.png" alt="">
        <p class="whitetxt">資料請求</p>
      </div>
      </div>
      <!-- header-in end -->
    </div>
  </header>

CSS

header{
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 70px;
  background-color: white;
  padding-bottom: 0;
}
.startlogo {
  float :left;
  margin-bottom: 0;
}
header-in{
  /* display: block; */
  top: 0;
  position: fixed;
  width: 100%;
  padding: 15px 50px;
}

header img, p {
  vertical-align: bottom;
}
/* contactsp */

.contact-s-sm @media screen and (max-width: 768px;){
height: 70px;
}
.contact-s-sm{
  display: none;
}

 .contact-s @media screen and (max-width: 768px) {
  display: none;
}

.contact-s {
  width: 318px;
  height: 44px;
  border: 1px solid #d86c67;
  background-color: #d86c67;
  border-radius: 25px;
  text-align: center;
  display: inline-block;
  float: right;
  margin-right: 70px;
}
.contact-s a{
  text-decoration: none;
color: #fff;
font-size: 14px;
display: block;
height: 100%;
padding-top: 10px;
}

お手数ですが、よろしくお願いいたします。

ayah03

Comments

[masshu]

多分関係ないけどHTMLに</div>が一つ多いのがめっちゃ気になります

[ayah03]

ありがとうございました。今、直しました。

Answer 1

たぶん@mediaの使い方かと

• @media

基本文法

@media <media-query-list> {
  <group-rule-body>
}

Comments

[ayah03]

ありがとうございます！　試して見ます

[ayah03]

ありがとうございます。
@media screen and() の中に入れ子にすることはわかりました。

↓のCSSは、CSSファイルのどこかに貼り付けるということでしょうか？
@media <media-query-list> {
<group-rule-body>
}

[m.ts10806]

いいえ違います。提示したのは基本文法の形式です。

[m.ts10806]

つまり
screen and (max-width: 768px)
も
<media-query-list>
のうちです。
回答に提示したリンク読めば理解は進むと思います

[ayah03]

ありがとうございます。

[m.ts10806]

それに・・・
模写だからある程度、自分で制限かけてるのかもしれませんけど、
出来たものがそこにあるのでしたら、むしろそのコードを確認してみるのはありだと思います。

私には原本コードを見るのと、質問サイトで他者にアドバイスを得るのと
違いがよく分かりません。
文法ならドキュメントを確認すれば良い話ですし・・。

[ayah03]

ありがとうございます。メディアクエリーのリンクと原本CSSを参照して、解決いたしました。
誠にありがとうございました。

[m.ts10806]

解決されたようで何よりです。