iPhoneで画像やコンテンツが画面からはみ出す

0
いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #118422
    NAUTICA(ノーチカ)
    参加者
    8

    【お使いの 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
    いいねをした人: 居ません
    #118429
    アバター画像キタジマ タカシ
    参加者
    2276

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

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

    また、

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

    0
    いいねをした人: 居ません
    #118435
    NAUTICA(ノーチカ)
    参加者
    8

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

    0
    いいねをした人: 居ません
    #118436
    アバター画像キタジマ タカシ
    参加者
    2276

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

    0
    いいねをした人: 居ません
    #118440
    アバター画像キタジマ タカシ
    参加者
    2276

    widthauto になった影響というのはあるかもしれませんが、一応ここをどうにかすればというところはわかったので共有します。

    .childcare-point01-inner .wp-block-columns h4word-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
    いいねをした人: 居ません
    #118483
    NAUTICA(ノーチカ)
    参加者
    8

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

    word-break: keep-all;

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

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

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

    0
    いいねをした人: 居ません
    #118507
    アバター画像キタジマ タカシ
    参加者
    2276

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

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

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

    0
    いいねをした人: 居ません
    #118524
    アバター画像キタジマ タカシ
    参加者
    2276

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

    ↓ これは不要で、

    .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
    いいねをした人: 居ません
    #118691
    アバター画像キタジマ タカシ
    参加者
    2276

    v19.1.5 で修正しました!

    0
    いいねをした人: 居ません
    #118800
    NAUTICA(ノーチカ)
    参加者
    8

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

    1
    いいねをした人:
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「iPhoneで画像やコンテンツが画面からはみ出す」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。