Vektor WordPress Solution
VWSとは › フォーラム › Lightning › [ 解決済 ] スマホ表示でボタン同士の上下に隙間がない。
タグ: コンテンツブロック ボタン カラム 隙間
コンテンツブロックを使用して 2カラムまたは3カラムで ボタンを配置しております。
スマホ表示でボタンとボタンの間(上下) に隙間がなくなっていました。 以前はきれいに配置されていたと思います。 パソコン表示では問題ないようですが。
確認をお願いします。
どうぞ宜しくお願いします
似たようなトピックとして下記が挙げられます。
2カラム以上で、縦並びになると上下のカラムがくっつく
現状だと、各カラムブロック内の最下部にレスポンシブスペーサーを置くか、 下記のような CSS で対応するかで各自で対応するしかないのが現状のようです。 ※私は開発者ではなく一般の利用者です。
.wp-block-column { margin-bottom:1em; }
見たようなトピックを見せて頂きました。 誠にありがとうございます。
検証したところ 画像は3カラムでも上下に隙間が空いており 問題ありませんでした。
ボタンを設置した場合は隙間がなく 上下にくっついています。
CSSに以下を設定してみましたが 何も変わりませんでした。
.wp-block-column { margin-bottom:40px; }
追記あり:
今回はパソコン画面では 画像設置、ボタン設置とも 隙間は空いており問題ないのですが スマホ表示のボタン設置は 上下にくっついています。
VK Blocks のボタンでは隙間ができますが、WP コアのボタンでは隙間ができないようです。 下記 CSS で共通のマージンを与えるか、各カラムの最下部にレスポンシブスペーサーを配置してみてください。
@media (max-width: 599px) { .wp-block-column { margin-bottom: 40px; } }
あと、CSS を変更したあとは、各種キャッシュの削除を忘れないようにしてください。
誠にありがとうございます。 間隔は10pxで良いようです。
こちらにCSS追加して反映しました。 ・カスタマイズ→追加css
@media (max-width: 599px) { .wp-block-column { margin-bottom: 10px; } }
以下は反映しませんでした。 ・子テーマの style.css ・ExUnit の CSS カスタマイズ