[ 解決済 ] LIghtningアーカイブページ設定などスマホでのカラム間隔について

VWSとは フォーラム Lightning [ 解決済 ] LIghtningアーカイブページ設定などスマホでのカラム間隔について

[ 解決済 ] LIghtningアーカイブページ設定などスマホでのカラム間隔について

  • このトピックには7件の返信、3人の参加者があり、最後にgundamにより1週、 1日前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #95821

    gundam
    参加者

    ■ WordPress のバージョン
    6.5.5

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.25.1

    ■ Pro Unit のバージョン
    9.98.1.0

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    外観のカスタマイズでLIghtningアーカイブページ設定などで表示タイプをカードにした場合
    なのですが、PCで見る場合は3列とかの場合は、全く気にしなかったのですが、
    スマホの場合2列に設定した場合、カラムの間隔が(真ん中)空きすぎるのですが、
    これは、仕方のない事なのでしょうか?
    グリッドカラムカードのように間隔を揃えたいです。
    例えば、2列だとして、仮に左側のカラムの間隔が、左15、右15、同じく右側のカラムも左15、右15
    となった場合、真ん中30で間隔が目立ちます。
    ※15というのはあくまでも説明しやすいように勝手に15と設定しました。
    実際は、間隔サイズはデフォルトままいじってません。

    ちなみにwoocommerceでの商品一覧は、間隔が均一になります。

    以上、よろしくお願いいたします。

    ■ 自分で試した事
    .vk_posts {
    padding-right: 15px;
    padding-left: 15px;
    }

    など、いじってみたのですが、希望通りにはいかないです。

    ■ 症状が発生するブラウザ
    safari

    ■ 実際の症状
    カラム間隔が均等にならない。隣り合った場合、倍になる、つまり間隔が空きすぎる。

    #95890

    うなこ
    モデレーター

    Gundamさま

    お世話になっております。Lightningをご利用いただき、誠にありがとうございます。

    ご指摘の通り、スマートフォンサイズでは余白が大きいですね。一度社内で検討させていただきます。

    お手数をおかけいたしますが、ひとまず以下のCSSを追加して対応していただけますでしょうか。
    外観 > カスタマイズ > 追加CSSなどに以下を追加してください。
    767.98px以下で余白が小さくなります。幅の数値や5pxはお好みで変更してください。

    /*レイアウト:カード*/
    .vk_posts-layout-card{
        justify-content: center;
    }
    @media (max-width: 767.98px) {
        .vk_post {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
    #95893

    gundam
    参加者

    うなこ様
    ありがとうございます。

    提示していただいたコードを追加CSSで書いてみました。
    確かに真ん中は、細くなりましたが、スマホ画面の左側、右側が他のブロックと揃わなくなりますね。空きができますね。
    出来ることなら、左端、右端は他のブロックと揃えたいです。
    グリッドカラムカードのように綺麗に揃えたいです。
    wooの一覧はいい感じになります。
    画像をご確認ください

    社内での検討よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #95935

    うなこ
    モデレーター

    gundamさま

    調整いたしまして、一旦は以下のCSSでいかがでしょうか。

    /* レイアウト:カード */
    /* 767.98以下 */
    @media (max-width: 767.98px){
    .vk_posts.vk_posts-layout-card {
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
    }
    
    .vk_post.card.vk_post-col-xs-6.vk_post-col-sm-6 {
    width: calc(50% - 7px);
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom:14px;
    }
    }

    CSSにつきましては、こちらがわかりやすいかと思いますので、もしよろしければご確認ください。

    できる!CSSカスタマイズ

    よろしくお願いいたします🙇

    #95972

    gundam
    参加者

    うなこ様

    ありがとうございます。

    綺麗に揃うことができました。
    ありがとうございます。

    #96484

    gundam
    参加者

    こんばんわ。
    先日は、カラム間隔のご教授ありがとうございました。

    当方、綺麗になったと喜んでおりましたら、

    スマホで一列の場合は、右端、左端が他のブロックと合わないし
    カルーセルでカードアイテム使っているところも合わなくなるし、
    2カラムの右側に2カラムの場合とか、
    多々、おかしくなったところがあります。
    すべてを検証しているわけではありませんが
    カードアイテムを使っているところが、結構バラバラになっています。

    もちろん、ブロックの中にブロックとか、四苦八苦して作ったものなので
    ここで綺麗になっても、他ではずれるとか・・・当たり前と言えば当たり前なのですが。

    グリッドカラム関係は本当によく使う機能だと思うので残念でなりません。
    やはり、ブロック同士は、縦一直線(両端)にしたいです。

    現状、スマホでは今まで通り通常の真ん中間隔多でやるのが、ベストなのかと思った次第です。

    レイアウトも2カラムもあれば1カラムもありますし
    ページによっては、スマホ時1列、2列もあります。

    結局は、スマホ2列のみだけの対応って感じになってしまいます。

    以上、ご検討のほどよろしくお願いいたします。

    追伸、意味が通じない場合、スクショします。だだ、名前消したり大変そうな感じがしたので今回はスクショやめました。

    #96485

    今月中旬にリリースされるWordPress 6.6 のグループブロックでグリッド機能が追加されますので、
    おそらくそちらでご希望の事はできるようになると思います。

    すみません、勘違いしておりました。
    アーカイブページなどでは使えませんでした。

    どこがどう希望通りにならないのかの図などいただくと対応しやすいです。

    但し、先述の通り 6.6 対応作業などが多いため作業は 8月頃になる見通しです。

    よろしくお願いいたします。

    #96530

    gundam
    参加者

    石川様 ありがとうございます。
    近々スクショアップさせていただきますので、しばしお待ちいただけますか。
    よろしくお願いいたします

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