WordpPressのギャラリーをPCでは4カラム、スマホでは2カラムで隙間なく並べる

WordpPress「Lightning」テーマを使用し、企業サイトを作成しております。
当方WordPress、html&css
"トップページコンテンツエリア"にウィジェットのギャラリー機能を使用し、PCでは4カラム、スマホでは2カラムで隙間なく並べるにはどのようなコードを書けばよいか分からず困っております。

Googledで検索しても初心者の私には分からずできませんでした。
また、下記サイトを見つけ、Googleの検証からコードをコピー&ペーストで書き写しても何も変わらずできませんでした。。
→http://ep3373.wp.xdomain.jp/　

大変お手数ですがかなり困っており、ご教示いただけますと幸いです。
作成中当サイト→https://raremo.jp/

また、上下の余白も均等になるコードを教えていただけますと幸いです。

お手数ですがよろしくお願いいたします。

7/25 18:23現在
▲１
教えていたいたコードを入力すると添付の表示となりました。

-millmill-

2020/07/25 16:39

ご自身が書かれたソースを載せて頂けませんか? 実際のソースを載せて頂けば、問題点を判断しやすいですし、回答も出やすいと思います。わざわざサイトのソースから該当箇所を探してまで力になろうという方は少ないと思いますm(__)m

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

回答1件

追加CSS に下記のコードを追加すればどうでしょうか。

css
1@media screen and (max-width: 640px) {
2  .gallery-columns-3 .gallery-item,
3  .gallery-columns-4 .gallery-item {
4    width: 50% !important;
5    margin: 0;
6  }
7}

教えていたいたコードを入力すると添付の表示となりました。

原因はようわからんけど、float: left で横並びにしているのが、あやしい。
CSS Flexbox で横並びさせたらどうでしょうか。
検証ツールではうまくいってます。

css
1@media screen and (max-width: 640px) {
2  #gallery-1 {
3    display: flex;
4    flex-wrap: wrap;
5  }
6  .gallery-columns-3 .gallery-item,
7  .gallery-columns-4 .gallery-item {
8    float: none;
9    width: 50% !important;
10    margin: 0;
11  }
12}