[NAUTICA（ノーチカ）]

【お使いの Snow Monkey のバージョン】 19.1.4
【お使いの Snow Monkey Blocks のバージョン】 18.1.4
【お使いの Snow Monkey Editor のバージョン】 9.1.2
【お使いのブラウザ】 Safari（iOS）, Chrome（iOS）, Safariレスポンシブデザインモード(16.3)
【当該サイトのURL】　https://crescendreams.jp/kaede/childcare/

### 発生している問題
iPhoneで表示した際に，画像やコンテンツが画面からはみ出しています。

### 試したこと
自力で調べた範囲ですが，開発ツールで下記のCSSを書き換えると改善されました。
こちらで対応すべきものか，アップデートで対応いただけるものか，教えていただけますか。

https://crescendreams.jp/kaede/wp/wp-content/themes/snow-monkey/assets/css/app/app.css?ver=1676462240

.c-container, .c-fluid-container {
box-sizing: content-box;
flex-grow: 1;
max-width: 100%;
padding-left: var(--_container-margin-left);
padding-right: var(--_container-margin-right);
width: auto;

↓

.c-container, .c-fluid-container {
box-sizing: border-box;
flex-grow: 1;
max-width: 100%;
padding-left: var(--_container-margin-left);
padding-right: var(--_container-margin-right);
width: 100%;

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ご報告ありがとうございます。

まだ iPhone（iOS）では確認できていないのですが、パソコンの　Chrome（や Firefox）でもスマホサイズに縮めたときは発生しますか？

また、

保育内容

PrevNext PrevNext CHILDCARE保育内容 これがかえで保育園の目指す子ども像です。 PH…

crescendreams.jp

のページは現在はみ出す状態のままで、「下記のCSSを書き換えると〜」の CSS は反映されていないという認識であっていますでしょうか？

♥ 0

いいねをした人: 居ません

[NAUTICA（ノーチカ）]

さっそくありがとうございます。
macOSのChromeの開発ツールでスマホサイズにした場合は発生していません。
iPhoneのSafariアプリ・Chromeアプリで確認した場合，あるいはmacOSのSafari開発ツールでレスポンシブデザインモードにした時に発生していますので，iOS固有の事象なのかなという感じがしています。
当該ページのCSSは開発ツールで書き換えて確認してみたのみで，CSSは反映されておらずはみ出す状態のままです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

詳しくありがとうございます、確認します！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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 側で変更を入れてみようと思います。

♥ 0

いいねをした人: 居ません

[NAUTICA（ノーチカ）]

さっそくありがとうございました！

word-break: keep-all;

が影響していたのですね…！
クライアントから句読点での改行を指定されたのでこのコードを入れていました（他にスマートな方法があれば教えていただきたいです）。
それでひとまず，

.c-container {
  max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width));
}

を採用させてもらいました。
アップデートで対応いただけるなら助かります。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

下記の issue で現在対応中です！

スリム幅を設定した記事・固定ページのページヘッダー部分がスリム幅にならない · Issue #1313 · inc2734/snow-monkey

@inc2734 お疲れ様です。 Snow Monkey v19.1.3のスリム幅の指定の仕方の変更の影響か、ページヘッダー（タイトルやmeta情報などの部分）やアイキャッチがスリム幅にならず…

github.com

クライアントから句読点での改行を指定されたのでこのコードを入れていました（他にスマートな方法があれば教えていただきたいです）。

改行位置をどうするかは悩ましいですよね…。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

もっとシンプルな解決方法を見つけてしまいました…。

↓ これは不要で、

.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 に複雑な計算式を書かなくても良いみたいです。アップデートで取り込みます！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v19.1.5 で修正しました！

♥ 0

いいねをした人: 居ません

[NAUTICA（ノーチカ）]

早速ご対応ありがとうございます！
適用するとコンテンツきちんと収まっていました。
min-content: 0;
こういう指定があるんですね…勉強になります。
トピック閉じますね！

♥ 1

いいねをした人:

[投稿者]

投稿