現在、Airbnbページの模写を行っております。
レスポンシブデザインでイメージ画像の1枚目から2枚目のようにウィンドウ幅をPC幅からタブレット用の幅にした時に
写真(夫婦?二人)のheightを短くし、form枠を写真を外に出したような状態にしたいのですが、
自分が書いたコードではcssのメディアクエリでcontainerサイズをheight: 300px;に設定したものの写真のheightも縮小されず、formが写真外に出ません。
どのように改善したら、原本通りになるのかご指導頂けたら幸いです。何卒宜しくお願い致します。
HTML
1 2<section class="top-wrapper "> 3 <div class="container imgc"> 4 5 6 <div class="row"> 7 <div class="col-xl-12 col-ex-12"></div> 8 <div class="col-xl-6 col-ex-12"></div> 9 <div class="col-xl-5 offset-1 col-ex-12"> 10 <h1 class="blankroom"><b>空き部屋で世界をつなごう</b></h1> 11 <p class="howincome"><b>どのくらいの収入が見込めるかチェック</b></p> 12 <p class="places"> 13 <label for="place"></label> 14 <input type="text" name="place" id="place" value="東京"> 15 </p> 16 <p class="places"> 17 <label for="place1"></label> 18 <select id="place1" value=""> 19 <option>まるまる貸切</option> 20 <option>個室</option> 21 <option>シェアルーム</option> 22 </select> 23 <label for="place"></label> 24 <select id="place" value="" class="gest"> 25 <option>ゲスト1人</option> 26 <option>ゲスト2人</option> 27 <option>ゲスト3人</option> 28 <option selected>ゲスト4人</option> 29 <option>ゲスト5人</option> 30 <option>ゲスト6人</option> 31 <option>ゲスト7人</option> 32 <option>ゲスト8人</option> 33 <option>ゲスト9人</option> 34 <option>ゲスト10人</option> 35 <option>ゲスト11人</option> 36 <option>ゲスト12人</option> 37 <option>ゲスト13人</option> 38 <option>ゲスト14人</option> 39 <option>ゲスト15人</option> 40 <option>ゲスト16人</option> 41 </select> 42 </p> 43 <span class="price3 "><b>¥195,255</b><span class="month">月あたり<i class="far fa-question-circle text-secondary"></i></span></span> 44 <p class="start mx-2"> 45 <button type="button" class="btn btn-danger price2"><b>はじめる</b></button> 46 </p> 47 </div> 48 49 </div> 50 51 </div> 52</section>
css
1@media (max-width:1200px ){ 2 .top-wrapper { 3 height: 700px; 4 } 5 .imgc { 6 height: 300px; 7 } 8 9} 10 11header { 12 height: 75px; 13 position: fixed; 14 top: 0; 15 z-index: 10; 16 width: 100%; 17 background-color: white; 18 19 20} 21.header-right { 22 float: right; 23 24} 25.header-right> .prices{ 26 27 font-size: 30px; 28} 29 30 31.top-wrapper { 32 background-image: url(old.png); 33 background-size: cover; 34 padding: 0; 35 margin: 0 auto; 36 height: 700px; 37} 38 39.col-xl-12 { 40 height: 100px; 41} 42.col-xl-5 { 43 background-color: white; 44 border-radius: 5px; 45} 46.blankroom { 47 margin: 15px; 48} 49.howincome { 50 display: inline-block; 51 margin-left: 12px; 52} 53.places { 54 margin-bottom: 5px; 55 margin-left: 12px; 56} 57input { 58 width: 410px; 59 height: 50px; 60 color: gray; 61 62} 63 64select { 65 color: gray; 66 width: 250px; 67 height: 50px; 68 69} 70.gest { 71 width: 150px; 72 height: 50px; 73} 74.price3 { 75 font-size: 40px; 76 display: inline-block; 77 margin-left: 12px; 78} 79.month { 80 font-size: 16px; 81 82} 83.start { 84 margin: 25px 25px; 85 height: 50px; 86 87} 88.btn-danger.price2 { 89 display: inline-block; 90 width:100%; 91 height:100%; 92}
回答1件
あなたの回答
tips
プレビュー