【ワードプレス】記事一覧をCSSで２列から４列にしたい

前提・実現したいこと

ワードプレスでこちらのテーマを使用しています
https://jin-demo.jp/demo-2/

デフォルトでは「記事の一覧（サムネイル）が２列」＋「サイドバー」という２カラム構造になっています。
２カラムのまま、
トップページ（ならびにカテゴリー一覧ページ）のサムネイル記事を
PC画面の時だけ４列のサムネイルにしたい。

↓イメージ図

発生している問題・質問内容

該当箇所（現在のコード）がわからないので教えて欲しい。
※現在のコードさえわかれば、あとは数値だけ自分で変えて、調整します。

試したこと

下記が該当箇所かと思って、追加CSSに貼り付けて、
素人考えで400%を200%にしてみたのですが変化がありませんでした。
場所そのものが違うようです。

.toppost-list-box-inner {
width: 400%;
transition: 0.6s;
text-align: left;
overflow: hidden;
}

chromeの「検証」でそれらしき箇所を探していますが
どうも、該当箇所にまでたどり着けず、質問させていただきました。

補足情報（FW/ツールのバージョンなど）

バージョン5.2.3

行動規範の内容に同意します

回答2件

ベストアンサー

追加CSSなら、下記のような感じでいいのでは。

css
1
2@media (min-width: 768px) {
3  .post-list-mag {
4    display: flex;
5    flex-wrap: wrap;
6    justify-content: space-between;
7  }
8  .post-list-mag .post-list-item {
9    margin-right: 0;
10    width: 24%;
11  }
12}

flexを使っているので、幅を25%以下にすれば4列になります。
marginを0にして、justify-content: space-between; を親に設定すれば、余白は均等に調整してくれます。

投稿2019/09/23 04:17

hatena19

総合スコア33699

imatya999

2019/09/23 05:01

できました！ありがとうございました！

行動規範の内容に同意します

css
1  @media (min-width: 768px) {
2    .post-list-mag .post-list-item,
3    .post-list-mag3col .post-list-item,
4    .post-list-mag-sp1col .post-list-item {
5      width: 48.5%;
6      margin-bottom: 20px; } }