- このトピックには9件の返信、2人の参加者があり、最後に
NAUTICA(ノーチカ)により1年、 6ヶ月前に更新されました。
-
投稿者投稿
-
2023年2月16日 5:54 PM #118422
【お使いの 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%;
♥ 0いいねをした人: 居ません2023年2月16日 6:22 PM #118429ご報告ありがとうございます。
まだ iPhone(iOS)では確認できていないのですが、パソコンの Chrome(や Firefox)でもスマホサイズに縮めたときは発生しますか?
また、
のページは現在はみ出す状態のままで、「下記のCSSを書き換えると〜」の CSS は反映されていないという認識であっていますでしょうか?
♥ 0いいねをした人: 居ません2023年2月16日 6:43 PM #118435さっそくありがとうございます。
macOSのChromeの開発ツールでスマホサイズにした場合は発生していません。
iPhoneのSafariアプリ・Chromeアプリで確認した場合,あるいはmacOSのSafari開発ツールでレスポンシブデザインモードにした時に発生していますので,iOS固有の事象なのかなという感じがしています。
当該ページのCSSは開発ツールで書き換えて確認してみたのみで,CSSは反映されておらずはみ出す状態のままです。♥ 0いいねをした人: 居ません2023年2月16日 6:43 PM #118436詳しくありがとうございます、確認します!
♥ 0いいねをした人: 居ません2023年2月16日 7:57 PM #118440width
が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いいねをした人: 居ません2023年2月17日 10:20 AM #118483さっそくありがとうございました!
word-break: keep-all;
が影響していたのですね…!
クライアントから句読点での改行を指定されたのでこのコードを入れていました(他にスマートな方法があれば教えていただきたいです)。
それでひとまず,.c-container { max-width: min(100% - var(--_container-margin-right) - var(--_container-margin-left), var(--_container-max-width)); }
を採用させてもらいました。
アップデートで対応いただけるなら助かります。♥ 0いいねをした人: 居ません2023年2月17日 3:15 PM #118507下記の issue で現在対応中です!
クライアントから句読点での改行を指定されたのでこのコードを入れていました(他にスマートな方法があれば教えていただきたいです)。
改行位置をどうするかは悩ましいですよね…。
♥ 0いいねをした人: 居ません2023年2月17日 8:53 PM #118524もっとシンプルな解決方法を見つけてしまいました…。
↓ これは不要で、
.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いいねをした人: 居ません2023年2月20日 12:43 PM #118691v19.1.5 で修正しました!
♥ 0いいねをした人: 居ません2023年2月21日 4:03 PM #118800 -
投稿者投稿
- トピック「iPhoneで画像やコンテンツが画面からはみ出す」には新しい返信をつけることはできません。