Q&A
HTML CSS Bootstrap ```### Airbnbサイトの模写をしています。レスポンシブ対応させたいです。 公式サイトでは、画面サイズが大きくなった時に「まるまる貸切」、「ゲスト1人」のformが横並びになります。 mediumサイズになった際に、横並びにする指定をしたいです。   ### 発生している問題・エラーメッセージ
formに対してのCSSで@mediaを記載して横幅を%で指定したのですが、「まるまる貸切」、「ゲスト1人」の横幅がどちらも一緒になってしまいます。
各selectタグの中にあるclassに対しての@mediaを指定すると、その指示は反映されません。
### 該当のソースコード
HTML
<body> <header> <img src="img/1.jpg" alt="1"> <div class="logo"><a href="#"><img src="img/logo_white.png" atl="logo"></a></div> <h1>Airbnbホストになって、暮らしをレベルアップ</h1> </header> <main> <section class="first"> <p class="mt-4 mb-2 ">どれくらいの収入が見込めるかチェック</p><input class="place w-100" type="text" name="location" placeholder="ペタリンジャヤ"><label for="room_type"></label> <form> <select class="select_1 w-100 h-30" id="room_type" name="部屋タイプ" type="text"> <option>まるまる貸切</option> <option>個室</option> <option>シェアルーム</option> </select> <!-- <label for="number"></label> --> <select class="guest w-100" id="number" name="人数" type="text"> <option>ゲスト1人</option> <option>ゲスト2人</option> <option>ゲスト3人</option> <option>ゲスト4人</option> <option>ゲスト5人</option> <option>ゲスト6人</option> <option>ゲスト7人</option> <option>ゲスト8人</option> <option>ゲスト9人</option> <option>ゲスト10人</option> <option>ゲスト11人</option> <option>ゲスト12人</option> <option>ゲスト13人</option> <option>ゲスト14人</option> <option>ゲスト15人</option> <option>ゲスト16人</option> </select> </form> </section>
CSS
@charset “UTF-8”;
body {
font-family: arial,sans-serif;
}
body p {
color: #575757;
}
/ヘッダーここから/
header img {
width: 100vw;
position: relative;
}
div.logo img {
/width:55px;/
width: 12%;
height: auto;
position: absolute;
top: 20px;
left: 16px;
}
header h1 {
color: #fff;
position: absolute;
top: 140px;
font-size: 33px;
text-shadow: 2px 2px 2px #4f4f45;
font-weight: bold;
padding: 0 30px;
line-height: 35px;
font-family: ;
}
@media screen and (min-width: 744px) {
form select.select_1 {
width: 60%;
background-color: gray;
}
}
### 試したこと Bootstrapの考え方から、colで横幅を変えることができました。 しかし、selectタグの間のマージを指定することができませんでした。 ### 補足情報（FW/ツールのバージョンなど） Google chromeでSublime textを使用しています。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/23 14:56