- このトピックには9件の返信、2人の参加者があり、最後に
により1年、 9ヶ月前に更新されました。
-
投稿
-
【お使いの 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を書き換えると改善されました。
こちらで対応すべきものか，アップデートで対応いただけるものか，教えていただけますか。.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%;いいねをした人: 居ませんさっそくありがとうございます。
macOSのChromeの開発ツールでスマホサイズにした場合は発生していません。
iPhoneのSafariアプリ・Chromeアプリで確認した場合，あるいはmacOSのSafari開発ツールでレスポンシブデザインモードにした時に発生していますので，iOS固有の事象なのかなという感じがしています。
当該ページのCSSは開発ツールで書き換えて確認してみたのみで，CSSは反映されておらずはみ出す状態のままです。いいねをした人: 居ません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 側で変更を入れてみようと思います。
いいねをした人: 居ませんさっそくありがとうございました！
word-break: keep-all;が影響していたのですね…！
クライアントから句読点での改行を指定されたのでこのコードを入れていました（他にスマートな方法があれば教えていただきたいです）。
それでひとまず，.c-container { max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width)); }を採用させてもらいました。
アップデートで対応いただけるなら助かります。いいねをした人: 居ませんもっとシンプルな解決方法を見つけてしまいました…。
↓ これは不要で、
.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に複雑な計算式を書かなくても良いみたいです。アップデートで取り込みます！いいねをした人: 居ません
- トピック「iPhoneで画像やコンテンツが画面からはみ出す」には新しい返信をつけることはできません。