前提・実現したいこと
bootstrapを用いたレスポンシブのLPを作成中です。コンテンツ(ここではreasonsクラス)を2つ横並びで表示しているのですが、768px以下の場合に、コンテンツをを縦に表示しています。この場合に、コンテンツが中央にきて、左右のマージンが自動になるように設定したいです。
ちなみに、768px以上のときに2つのコンテンツを内包しているクラス(reason_container)をmargin:autoで中央揃えにすることはできました。
発生している問題・エラーメッセージ
メディアクエリ内でwidthを設定しているのにもかかわらずmargin:autoが効かないです。
該当のソースコード
HTML
1<div class="why_app container"> 2 <div class="reasons_container row"> 3 <div class="reasons reason_1 col-xs-12 col-sm-6"> 4 <!-- 内容--> 5 </div> 6 <div class="reasons reason_2 col-xs-12 col-sm-6"> 7 <!-- 内容--> 8 </div> 9 </div> 10</div>
CSS
1.why_app { 2 height: 943px; 3 background-color: #F2F2F2; 4 width: 100%; 5 position: relative; 6 overflow: hidden; 7} 8.reasons_container{ 9 text-align: center; 10 width:1044px; 11 margin: 0 auto; 12} 13.reasons{ 14 background-color: #fff; 15 width: 482px; 16 height: 560px; 17 padding: 20px 40px; 18 margin: 20px; 19 border: solid 1px #CCCCCC; 20 box-shadow: 1px 1px 10px rgba(0,0,0,0.1); 21} 22 23@media screen and (max-width: 768px){ 24 25 .whyapp{ 26 height: 1347px; 27 position: relative; 28 } 29 .reasons_container{ 30 width:100%; 31 position: relative; 32 } 33 .reasons{ 34 width: 355px; 35 height: 505.5px; 36 margin: 0 auto; 37 }
試したこと
これ以外にどうしていいかわからない状況です。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/16 10:23
2018/08/16 13:26