VWSとは フォーラム Lightning [ 解決済 ] スマホ表示でボタン同士の上下に隙間がない。

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

  • このトピックには5件の返信、2人の参加者があり、最後にWithにより7ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #34446

    With
    参加者

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

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

    確認をお願いします。

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

    #34453

    DRILL LANCER
    モデレーター

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

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

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

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

    With
    参加者

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

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

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

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

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

    #34459

    With
    参加者

    追記あり:

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

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

    #34460

    DRILL LANCER
    モデレーター

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

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

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

    • CDN
    • プラグイン
    • サーバー
    • ブラウザ
    • この返信は7ヶ月前にDRILL LANCERが編集しました。
    #34466

    With
    参加者

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

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

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

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。