[ 解決済 ] スマホ表示でボタン同士の上下に隙間がない。

[With]

コンテンツブロックを使用して
2カラムまたは3カラムで
ボタンを配置しております。

スマホ表示でボタンとボタンの間（上下）
に隙間がなくなっていました。
以前はきれいに配置されていたと思います。
パソコン表示では問題ないようですが。

確認をお願いします。

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

[DRILL LANCER]

似たようなトピックとして下記が挙げられます。

2カラム以上で、縦並びになると上下のカラムがくっつく

現状だと、各カラムブロック内の最下部にレスポンシブスペーサーを置くか、
下記のような CSS で対応するかで各自で対応するしかないのが現状のようです。
※私は開発者ではなく一般の利用者です。

.wp-block-column {
	margin-bottom:1em;
}

[With]

見たようなトピックを見せて頂きました。
誠にありがとうございます。

検証したところ
画像は3カラムでも上下に隙間が空いており
問題ありませんでした。

ボタンを設置した場合は隙間がなく
上下にくっついています。

CSSに以下を設定してみましたが
何も変わりませんでした。

.wp-block-column {
margin-bottom:40px;
}

[With]

追記あり：

今回はパソコン画面では
画像設置、ボタン設置とも
隙間は空いており問題ないのですが
スマホ表示のボタン設置は
上下にくっついています。

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

[DRILL LANCER]

VK Blocks のボタンでは隙間ができますが、WP コアのボタンでは隙間ができないようです。
下記 CSS で共通のマージンを与えるか、各カラムの最下部にレスポンシブスペーサーを配置してみてください。

@media (max-width: 599px) {
	.wp-block-column {
			margin-bottom: 40px;
	}
}

あと、CSS を変更したあとは、各種キャッシュの削除を忘れないようにしてください。

• CDN
• プラグイン
• サーバー
• ブラウザ

• この返信は7ヶ月前にDRILL LANCERが編集しました。

[With]

誠にありがとうございます。
間隔は10pxで良いようです。

こちらにCSS追加して反映しました。
・カスタマイズ→追加css　

@media (max-width: 599px) {
.wp-block-column {
margin-bottom: 10px;
}
}

以下は反映しませんでした。
・子テーマの style.css
・ExUnit の CSS カスタマイズ

[投稿者]

投稿