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

タグ: グリッドカラム　レスポンシブスペーサー　モバイル表示　反映されない。

このトピックには2件の返信、2人の参加者があり、最後にWithにより3年、 10ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2021年3月11日 5:55 PM #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画像表示から
高さが自由に調整できると良いと思います。

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

2021年3月12日 11:00 AM #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 にできるかもしれません。
でも、けっこう手間がかかりそうですし、グリッドカラムを使うメリットがなくなりそうです。

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

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

2021年3月13日 10:43 PM #49471

With
参加者

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

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

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

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

投稿