正しく表示できているものは正しい HTML 構造であるのに対し、透明になってしまっているほうは HTML が正しい構造になっていないようです。
正）.smb-panels > .c-row > .c-row__col > .smb-panels__item
誤）.c-row__col > .smb-panels__item（.smb-panels と .c-row が無い）
ここを正しい構造で入れ直せば色がつくようになると思うので、ブロックを入れ直してみてください！
ご確認ありがとうございます。
運用の中で間違った変更をしてしまったのかもしれません。
試してみます。
①一部パネルブロックの背景色がなくなりました。
正しく表示できているものは正しい HTML 構造であるのに対し、透明になってしまっているほうは HTML が正しい構造になっていないようです。
正）.smb-panels > .c-row > .c-row__col > .smb-panels__item
誤）.c-row__col > .smb-panels__item（.smb-panels と .c-row が無い）
ここを正しい構造で入れ直せば色がつくようになると思うので、ブロックを入れ直してみてください！
もっとシンプルな解決方法を見つけてしまいました…。
↓ これは不要で、
.c-container {
max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width));
}
↓こう
.c-container {
min-content: 0;
}
これなら max-width に複雑な計算式を書かなくても良いみたいです。アップデートで取り込みます！
ありがとうございます。
WP-Optimize のページキャッシュを使っていたので取り急ぎプラグインを停止してみました。
これで様子をみたいと思います！
MW WP Formについての記事ですが原因はこういったものに近い形なんでしょうか？
さっそくありがとうございました！
word-break: keep-all;
が影響していたのですね…！
クライアントから句読点での改行を指定されたのでこのコードを入れていました（他にスマートな方法があれば教えていただきたいです）。
それでひとまず，
.c-container {
max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width));
}
を採用させてもらいました。
アップデートで対応いただけるなら助かります。
ありがとうございます！
次回からはそちらのissueも確認するようにいたします。
トピックを閉じます。
下記の issue と同じ問題かなと思います。
まだ zip ファイルが無いのですが、もし Git や Node などの開発環境があれば、上記のリポジトリから pull ＆ build して試すことができます。
タイトル部分については、下記の CSS を追加して修正される予定です。
[data-has-sidebar="false"][data-is-slim-width="true"] .c-entry > :not(.c-entry__body) {
margin-inline: auto;
max-width: var(--wp--custom--slim-width);
}
パンくず部分は HTML 構造が少し変わります。
width が auto になった影響というのはあるかもしれませんが、一応ここをどうにかすればというところはわかったので共有します。
.childcare-point01-inner .wp-block-columns h4 が word-break: keep-all になっており、改行されないために親要素が広がってしまっているようでした。
あと、
.c-container {
max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width));
}
でも良さそうでした。現状は
.c-container {
box-sizing: content-box;
max-width: 1280px;
width: auto;
}
なので基本は画面枠内で広がれるところまで広がるけど、1280pxよりは大きくならない、となっていて、普通に画像や文章を流し込むだけなら広がらないのですが、改行させなかったり（他にもなにかあるかも）して普通より広がるものがあると、iOS や Safari ではそちらの大きさのほうが（100% サイズになるまで）優先されてしまうみたいです。
max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), 1280px); のようにすれば、100% から .c-container についている padding 分の大きさを引いたものが最大幅になるので、結果的にきっちり収まるみたいです。
↑については Snow Monkey 側で変更を入れてみようと思います。
「更新」ボタンを押したら、「style=”width:1024px”」が消えました！
トピックスを閉じさせていただきます。
ありがとうございます！！
さっそくありがとうございます。
macOSのChromeの開発ツールでスマホサイズにした場合は発生していません。
iPhoneのSafariアプリ・Chromeアプリで確認した場合，あるいはmacOSのSafari開発ツールでレスポンシブデザインモードにした時に発生していますので，iOS固有の事象なのかなという感じがしています。
当該ページのCSSは開発ツールで書き換えて確認してみたのみで，CSSは反映されておらずはみ出す状態のままです。
あ、いえ、ブロックは、古い構造の HTML 構造が記事に保存されている場合、その記事の編集画面を開いたときに新しい HTML 構造に更新されるようになっています。更新されても画面上はに特に何もお知らせはでませんが、コンソールには更新した旨のログが出力されます。
なので、編集画面を開いて記事の更新ボタンを押せば新しい HTML 構造で保存されます。.smb-section__contents-wrapper に style 属性が付与されるのは少し古いバージョンの HTML 構造なので、最新の構造に更新すれば CSS は追加しなくても大丈夫ではないかなと思います。
ご報告ありがとうございます。
まだ iPhone（iOS）では確認できていないのですが、パソコンの Chrome（や Firefox）でもスマホサイズに縮めたときは発生しますか？
また、
のページは現在はみ出す状態のままで、「下記のCSSを書き換えると〜」の CSS は反映されていないという認識であっていますでしょうか？
ファイアウォールかなにかの影響で最後の文字が削られてしまうみたいです…。下記だとどうでしょう？
https://github.com/inc2734/snow-monkey/blob/master/src/js/fontawesome.js
