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

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

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

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #51401

    With
    参加者

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

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

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

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

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

    #51433

    With
    参加者

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

    #51434

    石川@Vektor,Inc.
    キーマスター

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

    #51435

    石川@Vektor,Inc.
    キーマスター

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

    #51440

    With
    参加者

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

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

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

    #51441

    石川@Vektor,Inc.
    キーマスター

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

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

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

    #51444

    With
    参加者

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

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

        ↓↓

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

    #51449

    対馬 俊彦
    参加者

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

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

    #51510

    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.
    #52826

    石川@Vektor,Inc.
    キーマスター

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

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