WordPress ボタンブロックの文字サイズをレスポンシブ対応したい

Question

実現したいこと

テーマ：Lightningを使用してサイトを制作しています。

画面サイズに応じて自動的にボタンが画面内に改行されずに収まるようしたいです。

発生している問題・分からないこと

ボタンブロックを配置し、均等にボタンが並ぶようにしたいのですが、うまく設定ができませんでした。

画面内に収まれば文字サイズやボタンが小さくなっても大丈夫です。

ご教授いただけたら幸いです。よろしくお願いいたします。

パソコン画面

スマホ画面

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

公式フォーラムに質問をしましたが、回答待ちです。

補足

特になし

Answer 1

「４の文字をブラウザの横幅を基準に自動的に小さくして他のボタンと同じ高さに収まるようにしたい」
ということとして回答してみます。

結論から言うとCSSのみで銀の弾丸的に解決する方法は現状なさそうです。

一番近いとすれば以下でしょうか？

li {
  font-size: 1vw; /* デフォルト */
}

@media (max-width: 600px) {
  li {
    font-size: 0.5vw; /* 小さい画面での調整 */
  }
}

あとはJSで要素の横幅を取ってきてやる方法でできそうですが
メンテナンスコストを考えるとお勧めしません。

詳しい状況は分かりませんが
一つのアイデアとしてスマホではボタンを縦に並べるのも良いと思います。

縦に並べるのはCSSで以下のように囲めばいけると思います。

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

またグリッドレイアウトを使用すればボタンの縦幅を調整するのも簡単そうです。
https://codepen.io/yuheiy/pen/ExEdKrx

もしCSS自体どう組み込めば良いかわからない場合は「Lightning CSSカスタマイズ」などで検索してみて下さい。
参考になれば幸いです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
追記：テスト結果
テーマ：Lightning バージョン: 15.26.2
子テーマを作成してCSSを追加したら以下のようになりました。

div.wp-block-button > a {
  font-size: 2vw;
}

Comments

[Zu_Chan]

該当部分のソースコードを追加しました。
助言をいただけたら幸いです。

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料１</a></div>
<!-- /wp:button -->

[euicnvhf202105]

ソースありがとうございます。テストを回答に追記してみましたがこのようなイメージでしょうか？ただvwは見ての通りブラウザのレンダリング仕様に依存するためタイミングによってはカラム落ちしたりとなかなか完璧には行きません。適宜ターゲットのブラウザサイズなどを決めていくしかないと思います。