[ 解決済 ] 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]

うなこ様

ありがとうございます。

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

[投稿者]

投稿