前提・実現したいこと
このサイトでデザインを調整しています。
http://eikaiwaonline.info/
ヘッダー下のエリアに、
パソコンでは4カラムの画像がならび、携帯では、2カラムの画像が並ぶようにしたいです。
よろしくお願いします。
発生している問題・エラーメッセージ
4カラムから2カラムに変形はできるけど、パソコンで見たときに、オレンジ背景の部分が1180pxになってくれない。
該当のソースコード
ヘッダー下にいれているHTML
HTML
1<div id="pickup"> 2<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div> 3<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div> 4<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div> 5<div class="pickup_post"><a href=“#”><img src=“画像URL” /></a></div> 6</div>
CSS
1.header-widget{ 2text-align:center; 3padding:0 20px; 4margin: 0px auto; 5background: orange; 6} 7@media only screen and (min-width: 1240px) { 8.header-widget{width:1180px;}} 9@media only screen and (min-width: 1030px) { 10.header-widget{width: 92%;}} 11 12#pickup{ 13 display:flex; 14 flex-direction: row; 15 flex-wrap: wrap; 16 justify-content: space-between; 17 margin-top:0.5em; 18 margin-bottom:0.5em; 19} 20#pickup .pickup_post{ 21 width:24%; 22} 23@media only screen and (max-width: 767px) { 24 #pickup .pickup_post{ 25 width:48%; 26 margin-bottom:1em; 27 } 28}
試したこと
.header-widget{width:1180px}にすると、パソコン版は幅1180pxになってくれるが、
レスポンシブでは崩れてしまう。
補足情報(FW/ツールのバージョンなど)
wordpress テンプレート Sango
回答2件
あなたの回答
tips
プレビュー