[ 質問者返信待ち ] 複数枚カルーセルのスマホ表示で画像上下に空白がでます。

[With]

VK Blocks Pro スライダーブロック
複数枚表示のカルーセルに対応

カルーセル表示：スマホ表示で上下に空白

VK Blocks Pro スライダーブロックで
カルーセル画像2枚で確認したところ、
スマホ表示では画像上下にとても空白がでます。
スマホ表示でも上下に空白が出ないようにできないのでしょうか。
検証をお願いします。

また、スマホ表示では画像が小さくなるので
スマホは別に枚数設定が出来ると良いです。

どうぞ宜しくお願いします。

[With]

利用のバージョンをお伝えします。
WordPress 5.7.1
Lightning Proバージョン: 8.9.6
JPNSTYLE バージョン 8.1.1

[石川＠Vektor,Inc.]

スライドの高さを画面サイズ毎に切り替えられるようになっているはずですが、モバイル時の高さを通常と違うように指定していますか？

[石川＠Vektor,Inc.]

スマホで枚数を切り替える機能は検討中です（実装時期未定）。

[With]

ご返答頂き、誠にありがとうございます。
モバイルの高さを調整してみました。
モバイルの高さは100位が良いようです。

「スマートフォンで縦表示」は画像下部にまだ空白があるようですが
「スマートフォンで横表示」は上下にとても空白が残ります。

誠にお手数ですが検証を
どうぞ宜しくお願いします。

[石川＠Vektor,Inc.]

「スマートフォンで縦表示」は画像下部にまだ空白があるようですが
「スマートフォンで横表示」は上下にとても空白が残ります。

ユーザーが何を入れるのかによって好みはわかれますし、
中に入れる要素が同じ高さとは限らないのでスライド側の高さを利用者が指定する仕様にしています。

細かく指定したい場合は独自にCSSをカスタマイズしてご利用ください。

[With]

誠にありがとうございます。

デペロッパーツールで以下の箇所を
580pxから280pxに変更して反映することが出来ました。
以下をCSS追加しますが反映されません。

　　　　↓↓

/* モバイル設定の高さサイズ */
@media (min-width: 769px) {
.vk_slider_5e6dfd4f0c4049f3ab29e27a91a67948,
.vk_slider_5e6dfd4f0c4049f3ab29e27a91a67948 .vk_slider_item{
height:280px!important;
}

[対馬 俊彦]

> 以下をCSS追加しますが反映されません。

モバイル設定なら、min-width ではなく max-width を使うべきではないでしょうか。

[With]

ご返信頂き、誠にありがとうございます。
min-width をmax-widthにしましたが反映されません。

デベロッパーツールの編集前の画像添付します。

デベロッパーツールから「height: 280px!important;」
にすると画像上下の空白がきれいに消えたので
以下のCSS編集したいと考えております。

@media (min-width: 769px) {
.vk_slider_5e6dfd4f0c4049f3ab29e27a91a67948,
.vk_slider_5e6dfd4f0c4049f3ab29e27a91a67948 .vk_slider_item{
height: 280px!important;
}

CSSの3か所に貼り付けましたが反映されません。
CSSが間違っているのでしょうか。

・カスタマイズ>CSS追加
・外観>テーマエディター
・CSSカスタマイズ

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

画面サイズがいくつの時に、
高さをいくつにしたいのでしょうか？

[投稿者]

投稿