前提・実現したいこと
html/cssにてbootstrapを用いたレスポンシブデザインのLPを作成中です。
768px以下のときに、フォームのinputの長さを可変幅(最大幅は400px)で、左右のマージン20pxで中央配置したいです。
発生している問題・エラーメッセージ
@media 内で最大幅幅400pxを設定しておりますが、画面サイズを420px以下にしてもフォーム(textもsubmitも)が縮まりません。
該当のソースコード
HTML
1<div class="top_form"> 2 3 <input type="text" name="email" placeholder="メールアドレス" class="oneline" > 4 <input type="text" name="pass" placeholder="パスワード" class="oneline"> 5 <input type=submit value="" class="btn_trial"> 6 </div> 7
CSS
1.top_form{ 2 width:480px; 3 height: 480px; 4 float: right; 5 background-color: rgba(256,256,256,0.75); 6 z-index: 10; 7 padding: 30px 40px ; 8 border: solid 1px #707070; 9 box-shadow: 2px 2px 10px rgba(0,0,0,0.4); 10 position: absolute; 11 top: 20px; 12 left: 160px; 13 14} 15 16.oneline{ 17 width: 400px; 18 height: 50px; 19 padding: 15px; 20 margin-bottom: 20px; 21} 22 23.btn_trial{ 24 color: #fff; 25 background-image: url(btn-pink.png); 26 width:400px; 27 height: 68px; 28 font-size:30px; 29 margin: 20px 0px; 30 padding: 20px 50px; 31 border-style: none; 32 border-radius: 5px; 33 line-height: 0; 34 35@media screen and (max-width: 768px){ 36 37 .top_form{ 38 position: static; 39 width: 100%; 40 text-align: center; 41 padding: 6% 3%; 42 } 43 input{ 44 max-width: 400px; 45 width:10%; 46 margin: 0 auto; 47 }
試したこと
メディアクエリ内でwidthを80%ほどに設定して、max-width400pxにしましたが、変わらず。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/16 10:04