セクション(背景画像/背景動画)のスマホ表示について

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #56732
    nashiro
    参加者
    2

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】11.2
    【お使いのブラウザ】edge(表示の不具合はiPhoneのChrome)
    【当該サイトのURL】https://fp-kyoya.com/itimonittou/

    ===

    お世話になります。

    セクション(背景画像/背景動画)のスマホの表示が右側にずれて、はみ出して表示されてしまいます。

    中心の持ってくるにはどのようにすれば良いでしょうか?

    固定ページ、ランディングページ(スリム幅)でページを作成しております。

     

    0
    #56735
    Kmical Lights
    参加者
    143

    セクション(背景画像/背景動画)のスマホの表示が右側にずれて、はみ出して表示されてしまいます。
    中心の持ってくるにはどのようにすれば良いでしょうか?

    調べたところ、ボタンテキストを折り返さない事による仕様からの不具合ですね。
    ボタンを折り返すかどうかは少し北島さんの考えを返答していただくとして…

    原因:

    この部分は、ボタンの幅に合わせて中央寄せとなっているんですね。
    しかし、ボタンのテキストの文字列が長い事で iPhone などの横幅の狭い端末ではボタンの長さが画面より大きいので、テキストも画面より大きい幅の中央に寄せられてしまっている状態のようです。
    その事で、テキストの位置がずれた形に見えています。
    また、画面よりはみ出す要素をhidden化していますので、テキストなどが切れた状態で表示されて不具合に至っています。

    対策:

    ボタンのテキストを変えずに対応する場合はテキストの折り返しを修正するなどを行う必要があると思いますので、
    急ぎでしたら、ボタンの「LINEの友だち追加で動画を受け取る」と書かれているテキストを短くする事で対策してみていただけますでしょうか?

    2
    #56765
    キタジマ タカシ
    キーマスター
    339

    Kmical Lightsさんありがとうございます!そういうこともあるなら折り返すようにしていたほうが良いですかね。折り返した見た目は変になると思いますが、折り返したらテキストが長いというのもわかりやすいですし。

    1
    #56776
    Kmical Lights
    参加者
    143

    @北島さん

    そういうこともあるなら折り返すようにしていたほうが良いですかね。

    どうでしょうね。
    折り返さない場合、テキストが切れてしまってはしまいますが、若干長くても1行で済むようになる場合もブラウザによってはあるのでちょっと悩む所ですね。
    しかしながら、折り返すと全テキストが表示されるので閲覧者に正しくボタンの意味を伝えられることや、1行で済むテキスト長であれば影響はない事もあるので、折り返すようにしても大きな問題はでないと思ってはいます。

    強制的に折り返すのを悩む場合、「テキストを折り返す」と言ったオプションはどうでしょうか?

    2
    #56784
    nashiro
    参加者
    2

    @Kmail Lightsさん
    @キタジマさん

    スマホの幅を超えると今回のような現象が起こるのですね。

    勉強になりました。

    文字数を減らすことで解決しました!

    ありがとうございます!

    2
    #56797
    キタジマ タカシ
    キーマスター
    339

    Snow Monkey Blocks のボタンについては「「テキストを折り返す」のオプションをつけるか検討します!

    8
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。