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

[gundam]

■ WordPress のバージョン
6.5.5

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

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

■ テーマのバージョン
15.25.1

■ Pro Unit のバージョン
9.98.1.0

■ スキンの種類
Origin III

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

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

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

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

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

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

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

[うなこ]

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;
    }
}

[gundam]

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

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

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

Attachments:

You must be logged in to view attached files.

[うなこ]

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カスタマイズ

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

[gundam]

うなこ様

ありがとうございます。

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

[gundam]

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

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

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

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

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

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

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

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

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

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

[石川＠Vektor,Inc.]

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

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

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

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

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

[gundam]

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

[投稿者]

投稿