前提・実現したいこと
div要素のBOXを
PC時横並び
スマホ時縦並びにしたいです。
HTML
に対しpc.CSS(PC用:CSSソース1つめ) sp.css(スマホ用:CSSソース2つ目)
で
発生している問題・エラーメッセージ
スマホになっても横並びのままになります
該当のソースコード
html
1 <div class="boxA"> 2 <div class="boxB" > 3 <div class="box-title">✔POINT</div> 4 <p>●文章 5 <br>●文章 6 <br>●文章 7 <br>●文章 8 <br>●文章 9 </p> 10 </div> 11 <div class="boxB" > 12 <div class="box-title">✔POINT</div> 13 <p>●文章 14 <br>●文章 15 <br>●文章 16 <br>●文章 17 <br>●文章 18 </p> 19 </div> 20 </div> 21 <br class="clear"> 22 <br>
CSS
1/*-------------------- box--------------------*/ 2.boxB { 3 float: left; 4 width: 50%; 5 margin: 2em 0; 6 background: #f1f1f1; 7 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); 8} 9.boxB .box-title { 10 font-size: 1.2em; 11 background: #5fc2f5; 12 padding: 4px; 13 text-align: center; 14 color: #FFF; 15 font-weight: bold; 16 letter-spacing: 0.05em; 17} 18.boxB p { 19 padding: 15px 20px; 20 margin: 0; 21} 22/*-------------------- boxA--------------------*/ 23.boxA { 24 border: none; 25 &:after { 26 content: ""; 27 display: block; 28 clear: both; 29 } 30}
CSS
1/*-------------------- box--------------------*/ 2.boxB { 3 margin: 2em 0; 4 background: #f1f1f1; 5 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); 6} 7.boxB .box-title { 8 font-size: 1.2em; 9 background: #5fc2f5; 10 padding: 4px; 11 text-align: center; 12 color: #FFF; 13 font-weight: bold; 14 letter-spacing: 0.05em; 15} 16.boxB p { 17 padding: 15px 20px; 18 margin: 0; 19} 20/*-------------------- boxA--------------------*/ 21.boxA { 22 border: none; 23 &:after { 24 content: ""; 25 display: block; 26 clear: both; 27 } 28}
試したこと
14:25 追記
HTML内に
<meta name="viewport" content="width=device-width">
sp.css内に
/---------------------------- スマ-トフォン向けのスタイル ----------------------------/
@media only screen and (max-width: 679px) {
をレスポンシブ変更の際に記載しております。
補足情報(FW/ツールのバージョンなど)
回答3件
あなたの回答
tips
プレビュー