サイト内検索
ショートコードを利用した新着記事(大きなサムネイル)をレスポンシブで表示したい | カスタマイズ相談 | Cocoon フォーラム

Topic starter2018年8月25日 15:08
こんにちは。
トップページにショートコードを利用し、ブログの記事を新着順に横並びに表示させております。
http://yahooauction.wp.xdomain.jp/
次のようなCSSで調整しましたが、レイアウトの調整でつまずいています。
.new-entry-cards.large-thumb {
display: flex;
}
#new-entry-cards.large-thumb a {
width: 33.333%;
}
レスポンシブがうまくいきません。
希望としては、完全なレスポンシブで、スマホで表示したときは縦一列になればいいなと考えています。
タブレットの場合は、タブレットサイズに合わせて可変するイメージで、1列でも2列でも構いません。
やり方を教えていただけると助かります。
どうぞよろしくお願いします。
2018年8月25日 19:40
試してないですが、多分こんな感じでいけるんじゃないかと思います。
.new-entry-cards.large-thumb { display: flex; flex-wrap: wrap; } .new-entry-cards.large-thumb a { width: 33.333%; } /*768px以下*/ @media screen and (max-width: 768px){ .new-entry-cards.large-thumb a { width: 50%; } } /*480px以下*/ @media screen and (max-width: 480px){ .new-entry-cards.large-thumb a { width: 100%; } }