Bootstrap v4.4 の「card」のレスポンシブ対応が上手くいかない。()

●「Airbnbでお家、アパート、お部屋をシェアしよう」に取り組んでいます。

●　下記のように@mediaを使ったのですが、480pxを下回ると
cardのCSSが解除？になります。

●太文字でなくなり、inputが丸角でなくなる等の問題が起こります。

●480pxを下回って「消えて」くれれば良いのですが、
太文字でなくなり、inputが丸角でなくなる状態で残ってしまいます。

助言よろしくお願いいたします。

-----------------------------------------------------------以下CSSです。-------------------

@media screen and (min-width:480px) {
.card {
float: right;
margin: 32px;
}

.card-title {
font-weight: bold;
font-size: 40px;
margin-bottom: 15px;
text-align: left;
margin-top: 10px;
}

.card-text {
font-weight: bold;
font-size: 16px;

}

.btn {
font-weight: bold;
}

.location {
border-radius: 4px;
padding: 11px;
margin-bottom: 8px;
width: 360px;
}

.occupy {
border-radius: 4px;
padding: 11px 40px 11px 11px;
}

.guest {
border-radius: 4px;
padding: 11px 40px 11px 11px;
}

#btn2 {
width: 360px;
padding: 10px 22px;
margin-top: 1px;
}

}
----------------------------------------------------------------以下HTMLです。-------------------

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css" > <link rel="shortcut icon" href="favicon.icon.png" /> </head> <body> <header> <nav> <div class="inner flex"> <div class="logo"> <img src="favicon.icon.png" alt="" width="50px" height="50px"> </div> <div class="menu"> <ul class="flex"> <li>予想月収</li> <li>￥１３７，５１１</li> <button type="button1" class="btn btn-danger">はじめる</button> </ul> </div> </div> </nav> </header> <div class="apple">

<div class="card" style="width: 25rem; height: 29.5rem;" >
  <div class="card-body">
    <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5>
    <p class="card-text">どれくらいの収入が見込めるかチェック</p>

      
      <input type="text" placeholder="ロケーション" class="location" value="京都">  

      <select name="stay" class="occupy">
        <option value="a">まるまる貸切</option>
        <option value="b">個室</option>
        <option value="c">シェアルーム</option>
      </select>

      <select name="number" value="ゲスト４人" class="guest">
        <option value="1">ゲスト１人</option>
        <option value="2">ゲスト２人</option>
        <option value="3">ゲスト３人</option>
        <option value="4">ゲスト４人</option>
        <option value="5">ゲスト５人</option>
        <option value="6">ゲスト６人</option>
        <option value="7">ゲスト７人</option>
        <option value="8">ゲスト８人</option>
        <option value="9">ゲスト９人</option>
        <option value="10">ゲスト１０人</option>
        <option value="11">２スト１１人</option>
        <option value="12">ゲスト１２人</option>
        <option value="13">ゲスト１３人</option>
        <option value="14">ゲスト１４人</option>
        <option value="15">ゲスト１５人</option>
        <option value="16">ゲスト１６人</option>
      </select>
      <h6 class="card-title">¥ 153,672</h6>

    <button type="button2" class="btn btn-danger" id="btn2">はじめる</button>
  </div>
</div>
<h1>Airbnbホストになって、暮らしをレベルアップ</h1>

</div> </body> </html>

s8_chu

2020/02/09 13:36

質問を編集し、 Bootstrap タグを付与していただけませんか？

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

回答1件

ベストアンサー

●　下記のように@mediaを使ったのですが、480pxを下回ると cardのCSSが解除？になります。
●太文字でなくなり、inputが丸角でなくなる等の問題が起こります。

@media 規則により装飾が行われていますが、画面幅が 480px より小さくなると、これらの装飾が適用されなくなるため、そのような現象が発生しています。

●480pxを下回って「消えて」くれれば良いのですが、太文字でなくなり、inputが丸角でなくなる状態で残ってしまいます。

もし画面幅が 480px を下回った場合に、それらの要素を非表示にしたいのであれば、別途 display プロパティによる装飾をしなければなりません (動作確認用リンク)。

CSS
1@media screen and (min-width:480px) {
2  .card {
3    float: right;
4    margin: 32px;
5  }
6
7  .card-title {
8    font-weight: bold;
9    font-size: 40px;
10    margin-bottom: 15px;
11    text-align: left;
12    margin-top: 10px;
13  }
14
15  .card-text {
16    font-weight: bold;
17    font-size: 16px;
18
19  }
20
21  .btn {
22    font-weight: bold;
23  }
24
25  .location {
26    border-radius: 4px;
27    padding: 11px;
28    margin-bottom: 8px;
29    width: 360px;
30  }
31
32  .occupy {
33    border-radius: 4px;
34    padding: 11px 40px 11px 11px;
35  }
36
37  .guest {
38    border-radius: 4px;
39    padding: 11px 40px 11px 11px;
40  }
41
42  #btn2 {
43    width: 360px;
44    padding: 10px 22px;
45    margin-top: 1px;
46  }
47
48}
49
50@media screen and (max-width: 479px) { /* 追記 */
51  .card {
52    display: none !important;
53  }
54}