僕の環境へ確認してみたのですが、添付画像にあるように以下のような症状にはならないです。

スマホで見ると、画像が伸びまくり次の文章にまでかぶってしまっている始末です。

利用端末は何でしょうか？
よろしければ、状態をスクリーンショットで撮影して、画像をアップしていただいてよろしいでしょうか。

あと、ギャラリーを３カラムで載せようとすると、カラム落ちして並んでくれません。

これに関しては、テストページにでも不具合環境を作成して、見せていただけると助かります。

ご返信ありがとうございます。

ｐｃでchromeの画面を小さくしてスマホサイズにして、崩れたギャラリーをスクショして添付致しました。

手持ちの実際のスマホから見たのも同様に崩れていて、

ドコモGalaxy　SC-04J   と  ドコモArrowsBe　F-04K  のアンドロイドスマホです。

１年ほど経っているスマホですが、そんなに古い端末とは思えないのですが…。

サイトの作成はWindows１０のedgeで作っていますが、画面を小さくしてもスマホのようにならないので確認できません。やり方がわかりません…。

＞＞あと、ギャラリーを３カラムで載せようとすると、カラム落ちして並んでくれません。

https://shiina-stone.com/construction 　　

こちらのページに、６枚の画像で、３カラムと６カラムバージョンで作ってみました。

３カラム→２カラム状態、

６カラム→５枚と１枚に分かれています。

ちなみにこちらのギャラリーもスマホで見るとめちゃめちゃに崩れています。

ギャラリーの崩れに関して、いろいろネットで調べてみましたがこれといったものが見つからず、途方に暮れています。

あまり遭遇しない不具合なのかもしれませんが、なにとぞよろしくお願い致します。

お疲れ様です。

どこの記載がそのように表示させているかをチェックしたいので、

• Cocoon設定・高速化にあるCSS縮小化のチェックを外していただけますか。

一応CSSは以下を追記すればOKっぽいのですが。

.wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: auto;
}

かうたっく様、ありがとうございます。

CSS縮小化のチェックを外してあります。

ご確認お願いいたします。

そして、外観→テーマエディター→style.css に、!important（付けないとダメでした。）を付けて上記のcssを追記しました。

結果のスマホ画像を添付致します。

以前よりだいぶ整い、いい感じに近づきましたが、もうちょっとな感じです。

https://shiina-stone.com/construction

なぜか一番下の、８枚のギャラリーだけはキレイにそろいました。

あと、ｐｃですが、chromeでは、ちゃんと３カラム→３カラム、６カラム→６カラムになりました。

edgeでは、３カラム→２カラム、６カラム→５カラムのままです。

ご面倒をおかけしますが、引き続きよろしくお願い致します。

https://shiina-stone.com/wp-includes/css/dist/block-library/style.min.css?ver=5.1.1&fver=20190225013833

このファイルが原因なのかもですね。これってデフォルトなのか。

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: 100%;
	flex: 1;
	-o-object-fit: cover;
	object-fit: cover;
}

高さが100%になっている箇所全部変更しちゃっても良いかもしれません。

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {
	height: auto;
}

優先順位が低いようなら、

.article .wp-block-gallery.is-cropped .blocks-gallery-image a, .article .wp-block-gallery.is-cropped .blocks-gallery-image img, .article .wp-block-gallery.is-cropped .blocks-gallery-item a, .article .wp-block-gallery.is-cropped .blocks-gallery-item img

このような指定で試してだめであれば、!importantを入れてstyle.cssで追記して様子をチェックしていただけますか。

今はChromeでそこしか見てませんが。

.wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img {height: auto;}

.article .wp-block-gallery.is-cropped .blocks-gallery-image a, .article .wp-block-gallery.is-cropped .blocks-gallery-image img, .article .wp-block-gallery.is-cropped .blocks-gallery-item a, .article .wp-block-gallery.is-cropped .blocks-gallery-item img{height: auto;}

上記、二つをテキストエディターのstyle.cssに追記してみましたが、どちらもうまくいかないようです(>_<)８枚のギャラリーまで崩れてしまいました。一番上のを追記したものを画像に載せておきます。（もしかして入力の仕方が間違っているでしょうか？）

以前の下記の追記の方が、８枚のギャラリーはキレイになっていたので良かったようです。

.wp-block-gallery.is-cropped .blocks-gallery-item img {
height: auto;}

いずれも枠ができて、いい感じにはなってきているのですが、どうも高さがバラバラで整いません。

あと、今しみじみ気づいたのですが、やはり特定のページに問題があるようで、上記３つのいずれも追記すると、他のページの正常なギャラリーが崩れてしまいます。

ので、今はサイトは何も追記していない状態になっています。

https://shiina-stone.com/construction 　←特に問題のあるページ

一度、新規でページを作り直してみたりもしたのですが、下記のカスタムhtmlを入力した途端、ギャラリーが崩れました。でもこんな感じのは他のページでも使っています。たまたまでしょうか？私には全然わかりません。(´;ω;｀)

<ul class="container">
<li class="item"><figure class="wp-block-image"><img class="wp-image-1866" alt="石塀工事写真" src="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-800x600.jpg" srcset="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-800x600.jpg 800w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-300x225.jpg  300w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-500x375.jpg  500w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122-768x576.jpg  768w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1122.jpg  1600w" sizes="(max-width: 800px) 100vw, 800px"><figcaption><br></figcaption></figure></li>
<li class="item"><figure class="wp-block-image"><img class="wp-image-1572" alt="矢印　赤" src="https://shiina-stone.com/wp-content/uploads/2019/03/yajirusi-aka.png">
</figure></li>
<li class="item"><figure class="wp-block-image"><img class="wp-image-1867" alt="石塀工事写真　After" src="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-800x600.jpg" srcset="https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-800x600.jpg 800w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-300x225.jpg  300w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-500x375.jpg  500w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138-768x576.jpg  768w,  https://shiina-stone.com/wp-content/uploads/2019/04/CA3C1138.jpg  1561w" sizes="(max-width: 800px) 100vw, 800px"></figure></li>
</ul>

<style>
.container {
display: table;
width: 100%;
margin: 0 auto;
table-layout: fixed;
padding-left :0px;
}

.item {
display: table-cell;
vertical-align: middle;
text-align: center;
}


.item:nth-child(1) {
width: 45%;
}

.item:nth-child(2) {
width: 10%;
}

.item:nth-child(3) {
width: 45%;

}</style>

すみませんが、よろしくお願い致します。m(_ _)m

そのようになるページの.containerがdisplay: table;なってるからですね。

flexにすれば良いけどそれを指定すればレイアウトが壊れるような作りがややこしくしてそうかと思います。

<ul class="container">

これはご自身で指定されてるんですよね。このclass属性の名前がややこしくしてて。

ブラウザで見える範囲を囲む領域が同じ名前なんですよね。

<

div id="container" class="container cf"

>

ご自身のほうでclass属性を変更、それに伴ってCSSも同時に変更したほうが良いと思います。そのページのHTMLをコピペしてテキストエディタで一括置換するなど。

ul class="container"　を　ul class="ul-container"　などに

<style>
.container {　を　.ul-container {　のように。

何かのプラグインでそのような指定をされてるんですかね？

styleタグは変更が面倒なので、自分なら絶対使わないです（笑）

かうたっく様、ありがとうございます！！(*‘∀‘)

無事に整いました！！

こちらで相談させていただいて良かったです☆

わいひら様も気にかけて頂きまして、ありがとうございました♡

また、何かありました時にはよろしくお願いいたします(^^♪

ul class="container"　などの書き込みがなければ、気付かない所でした。

独自のカスタマイズが　対象外　である意味もよくわかりました。

ですが、今回は書き込みが分かりやすいものだったので、いつもCocoon的？私的？にも対応できるのかな？？？と思わされました＾＾

結果オーライで良かったですよねっ❦イロイロお疲れさまでした！