『項目』ブロックの枠線のスマホ表示について

＞キタジマさん

返信ありがとうございます。

こちらの環境だと再現しない感じなのですが、そのページの URL を教えてもらうことってできますか？

現在ローカル環境で構築しているためすぐにページを共有できない状態でして…何かお見せする方法があれば良いのですが…

ちょっと弄ってて思ったのですが、「ボーダー」を選んでいても縦線部分が「境界線」になっているようなことはあり得ないですよね…？見た目が似ていたもので…

また文字も左の列はぴったりと境界線にくっついてしまっているので、何か全体的にずれているような気もします…？（いったんこちらで追加CSSに記述されているものをすべて削除してみたのですがこれでは変わりありませんでした）

項目ブロックの子ブロックがスタンダードか自由入力になっているのかな？と思いますが、ブロックリンクを試してみてください。

こちらありがとうございます！ご指摘のとおり『自由入力』を利用しておりました。

『ブロックリンク』がいまいちぴんときていなかったのですが、画像やボタンなど入れなくてもそれぞれのパーツ（ブロック？）全体にリンクを設定できる感じでしょうか？

であれば『ブロックリンク』を使うのが一番理想に近いのでこちらを利用したいと思います。

ちなみにブロックリンクを選択しても境界線のズレやスキマ問題は解決せずでした…

＞キタジマさん

ご返信ありがとうございます。

「ボーダー」も「境界線」も確かに項目内の余白が想定より小さいようにみえます。「スマホ表示」ということですが、デバイスは何を使っていますか？ iPhone 12、Pixel 6 等…

デバイスですが、デベロッパーツールの各デバイスiPhone系、Pixel系等色々試してみたところ、画面サイズは異なるものの全てのデバイスにて上記の状況が発生しました。

また実機で自前のXperiaで確認しても現象が発生しているので、デバイスの問題ではなさそうな気がしています。。。

デベロッパーツールで確認したところ、下記のCSSが当たっているみたいで、

margin-bottom: .9rem;
margin-bottom: calc(var(--_space, 1.8rem)*.5*var(--_margin-scale, 1));
padding-left: .45rem;
padding-left: calc(var(--_space, 1.8rem)*.25*var(--_margin-scale, 1));
padding-right: .45rem;
padding-right: calc(var(--_space, 1.8rem)*.25*var(--_margin-scale, 1));

margin-bottomを外してみると縦線の隙間は無くなるようです（ただその場合3列目の幅がやや小さくなってしまうのですが…）。

＞キタジマさん

これは .smb-items.is-style-border についてですかね？ こちらで確認したところ、

ご確認いただきありがとうございます。

私が確認して余白が消えたのは、

@media (max-width: 39.9375em)
.c-row[data-columns]:not([data-columns="1"])>.c-row__col {

の部分のCSSでした。

また、追加CSS以外に自分でCSSを記述したところはありませんので念のため追加CSS部分を再度削除してみましたが状況は変わらずでした（他のプラグイン等の影響などもあるでしょうか？）

♥ 1

いいねをした人:

ありがとうございます！
クライアントからの要望でちょうどこの項目のブロックリンクが使えたら良いなあと思っていたのでご対応いただけると助かります…！

年末年始でお忙しいとは思いますがお手すきの際によろしくお願い致します。

＞キタジマさん

修正ありがとうございます！

アップデートし確認致しました。問題なく表示されておりました。

解決しましたのでトピック閉じさせていただきます。

♥ 1

いいねをした人: