子テーマのstyle.cssに以下のように書くと多分いけるのではないかと思います。

.column-wrap.column-3 > div {
    max-width: 33%;
}

@media screen and (max-width: 768px){
  .column-wrap {
      flex-direction: row;
  }
} 

わいひら様

できました！

「私の１週間の時間は何だったのだろう…」というくらいです。

貴重な時間を割いていただき，ありがとうございます！

わいひら様

度々すみません。

「解決した！」と思ったのですが，問題が２つありました。

【問題①】まん中の画像だけ縦の長さが短くなっている。

例えば，以下の２つのページは二つともそうなっています。

https://okayamacamp.com/region-search/

https://okayamacamp.com/shiogama-campingvillage-facility2018/

【問題②】スマホで表示した時に，画像が縦並びに表示されていない。

スマホで表示した時も，PCと同じように画像が横に３つ並んでしまって見にくくなっています。

もしよろしければ，お力添えをください。

/*カラムに貼り付けた画像が横にはみ出してしまわないように*/
@media screen and (min-width: 480px) and (max-width: 768px) {
  .column-wrap {
    flex-direction: row;
  }
  .column-wrap.column-3 > div {
    max-width: 33%;
  }
  .column-wrap.column-3 .column-left,
  .column-wrap.column-3 .column-right {
    padding: 0;
  }
}
@media screen and (min-width: 769px) {
  .column-wrap.column-3 > div {
    max-width: 33%;
  }
}

なんだか入り組んでましたが、こうかなぁ。

画像の横幅を「264px」

min-width: 480px　の数値は、もう少し小さくてもイケると思うので、お好きな数値でどうぞ。

他の記事でもご確認くださいね。

スマホ等では縦並びで表示されるようにしたい

これを、横並びと見間違えていました。

縦並びにするのであれば、以下だけで多分いけるかと（問題①の修正含む）。

.column-wrap {
  justify-content: space-between;
}

.column-wrap.column-3 > div {
  max-width: 33%;
  padding: 0;
}

わいひらさん，かうたっくさん

私のためにお時間を使って考えていただいてありがとうございます。

①まず，わいひらさんのアドバイス通りやってみました。

すると，【問題①】の「まん中の画像だけ縦の長さが短くなっている」は解決され，さらに【問題②】の「スマホで表示した時に，画像が縦並びに表示されていない」も解決できました。

しかし，「スマホで表示した時に画面が小さいまま表示されていて見にくい」という新たな問題が発生しました…。PC画面を小さくした時やスマホ表示時などには自動的に画像が縦並びになって，しかも画像が横幅いっぱいに広がるというのが理想のイメージでした。

②次に，かうたっくさんのアドバイス通りにやってみました。

すると，PC表示では画像が横にきちんと並び，表示画面の横幅を大きくしたり小さくしたりしても，画面に合わせて画像の大きさが自動的に変わるので，イメージ通りでした。

また，スマホで表示した時には，画像が自動的に縦並びになって，しかも画像がスマホ画面の横幅いっぱいに広がり，理想のイメージ通りでした。

しかし，【問題②】の「スマホで表示した時に，画像が縦並びに表示されていない」が解決できませんでした。

私のイメージする画面は，以下のような画面です。

https://tabioka.com/cultural-assets/

このような画面にするためにはどうすればよいでしょうか？

私の説明が不十分で，たくさんお手間をとらせてしまったのですが，アドバイスをいただけると幸いです。

https://okayamacamp.com/shiogama-campingvillage-facility2018/

上記で確認しました。

また，スマホで表示した時には，画像が自動的に縦並びになって，しかも画像がスマホ画面の横幅いっぱいに広がり，理想のイメージ通りでした。

スマホで縦並び希望。ですよね？理想のイメージで良かったです。

しかし，【問題②】の「スマホで表示した時に，画像が縦並びに表示されていない」が解決できませんでした。

スマホで縦希望、縦並びで理想のイメージ。だけど、スマホで画像が縦並びになっておらず解決できない。

申し訳ないですが、ちょっと意味が分かりません。

しかし，「スマホで表示した時に画面が小さいまま表示されていて見にくい」という新たな問題が発生しました…。

そうだ。そしたらこうか。

.column-wrap {
  justify-content: space-between;
}

.column-wrap.column-3 > div {
  max-width: 33%;
  padding: 0;
}

@media screen and (max-width: 768px){
  .column-wrap.column-3 > div {
    max-width: none;
    padding: 5px;
  }
}  

前回同様、こちら側ではちゃんとした動作確認をしてないので、まだ問題点があるかもしれないけど、そしたらCSSはその状態のまま、また見せてください。

やっぱりその状態で良いんですね！

って事は、わいひらさんの冒頭のコードを借りるとこんな感じかも！？

正解がわかりませんが ? 

@media screen and (min-width: 480px) {
  .column-wrap.column-3 > div {
    max-width: 33%;
    padding: 0 2px;
  }
  .column-wrap {
    flex-direction: row;
  }
}

わいひらさん　かうたっくさん

できました！イメージ通りです。本当に感激しております。

そして，できたこと以上に，わいひらさん，かうたっくさんが私のような者の悩みを真剣に考えてくださったことに心から感謝します。

そして，かうたっくさん。私の入力ミスでした。申し訳ありません。

しかし，【問題②】の「スマホで表示した時に，画像が縦並びに表示されていない」が解決できませんでした。

ではなく，正しくは

【問題①】の「まん中の画像だけ縦の長さが短くなっている」が解決できませんでした。

ということでした。

でも，無事に解決できました。

今はまだ駆け出しで自分には何の力もありませんが，いつかお二人に恩返しができるよう，これから勉強していきますね。

本当にありがとうございました！