[ 解決済 ] レスポンシブスペーサーでモバイル表示の設定が反映されません。

VWSとは フォーラム Lightning [ 解決済 ] レスポンシブスペーサーでモバイル表示の設定が反映されません。

[ 解決済 ] レスポンシブスペーサーでモバイル表示の設定が反映されません。

  • このトピックには2件の返信、2人の参加者があり、最後にWithにより2年、 11ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #49407

    With
    参加者

    Lightnig Pro バージョン: 8.9.0
    JPNSTYLE バージョン 8.1.0
    VK Blocks Pro バージョン 1.0.13

    グリッドカラムを
    横並び3つ配置して
    それぞれに
    Outerブロック(背景に画像)を挿入

    グリッドカラムに
    レスポンシブスペーサー設定しても
    モバイル表示の設定が認識されません。
    実際のスマホ表示では
    高さ調整しても高さが変わらずに
    背景画像の上下が切れてしまいます。
    モバイル設定が反映されていないようです。
    検証をお願いします。

    グリッドカラム又はレスポンシブスペーサーの
    どちらに原因があるのでしょうか。

    例:デバイス毎の高さ
    PC 180
    モバイル 180

    Outerブロック(背景に画像)を挿入
    デフォルトの背景表示は
    高さが削られて横長になります。
    一般的に写真画像は4:3の表示なので
    デフォルトで4:3表示はできないのでしょうか。
    初めから上下削られるのではなく
    基本の4:3画像表示から
    高さが自由に調整できると良いと思います。

    常にレスポンシブスペーサーを入れて
    高さを設定しております。
    毎回、手間が掛かり大変です。
    ご検討下さい。

    #49433

    Lightnig Pro バージョン: 8.9.0
    JPNSTYLE バージョン 8.1.0
    VK Blocks Pro バージョン 1.0.13

    同じバージョンで試してみましたが、レスポンシブスペーサーのデバイス毎の高さは
    PC, タブレット, モバイル のそれぞれで正常に機能しています。

    デフォルトの背景表示は
    高さが削られて横長になります。

    背景画像は壁紙のような扱いなので、上下または左右が欠けるのはしかたないです。

    一般的に写真画像は4:3の表示なので
    デフォルトで4:3表示はできないのでしょうか。

    Outer ブロックはその名前の通り、
    いろいろなブロックを入れることができる外枠としての利用を前提としていて、
    縦横比のデフォルトを決めるのは無理があると思います。

    CSS でカスタマイズすれば Outer ブロックの縦横比を 4:3 にできるかもしれません。
    でも、けっこう手間がかかりそうですし、グリッドカラムを使うメリットがなくなりそうです。

    画像の上下・左右が欠けないようにしたいのであれば、
    背景として使わずに画像ブロックを使えばいいように思いますが、
    画像ブロックではダメなんですよね。

    作成したページのスクリーンショットを提示していただけると、
    なにか別の回答ができるかもしれません。

    #49471

    With
    参加者

    ご連絡を頂き誠にありがとうございます。
    ほぼ解決できました。

    Outerから4:3のバナー画像を作成したいと考えました。
    文字とボタンでページリンクを付けて装飾できれば
    Photoshopでバナー画像を編集する作業が減るかと思いました。

    Outerの背景画像を設定後に
    タイトル、段落、ボタンを挿入
    高さを出すためにレスポンシブスペーサー挿入しましたが
    画像の上に文字があると見づらいので
    なるべく画像にかぶらないように下部も文字を配置。
    バナーとして利用すたいのですがレイアウトが難しい状況でした。

    ボタンと文字の背景が透けて見えるようになれば良いと思いました。

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