フォーラムへの返信
-
ありがとうございます！再現できました！
僕の環境でできたと思っていたのは勘違いでした(TT)ボタンブロックの最小幅、画面や親要素が小さいときでもはみださないように、
min-width: min(100%, 指定した値)という CSS になっているのですが、このmin(100%が両端ブロックと相性がわるいみたいで、入力した値（300px）よりも100%のほうが優先されて縮んでしまうみたいでした。min(100%を外せば解決はするのですが、そうすると本来の意図である「画面や親要素が小さいときでもはみださない」が達成できなくなるので、対応が難しいというか悩ましいというか、どうやれば良いかわからないです…。なのでここは追加 CSS で対応頂くのがベストかなと思います。お手間おかけしてすみません！
いいねをした人：あーどうも「流体タイポグラフィ」を有効化すると、干渉して、読み込み順によっては「流体タイポグラフィ」がデフォルトで持っているフォントサイズのほうが優先されてしまい、小さくなってしまうということがおこりえるみたいです。
僕の環境だと「流体タイポグラフィ」の CSS が先に読まれるから上書きされて小さくならなかったみたいです。流体タイポグラフィの CSS を弱める変更を入れようと思います。できたらまた書き込みます！
いいねをした人：僕の開発環境でテストしてみました。
↓の画像の上側が 100px のカスタムフォントサイズ、下側が 50px〜100px のカスタムフルード値を設定したものです。
ちゃんと反映されていて、HTML 上に下記の CSS が出力されていました。
--wp--preset--font-size--custom-1: 100px; --wp--preset--font-size--custom-2: clamp(50px, 3.125rem +((1vw - 3.2px)* 4.931), 100px);公開側の画面で適用されなくなったということは、何らかの CSS で上書きされてしまっているか、何らかの原因で上記のような CSS が出力されなくなっている可能性があるのかなと思います。その辺確認してみてください！
もし URL を共有いただけるならこっちでも見てみます。
いいねをした人：僕の環境だと、下記の画像のようにフォーム自体は横いっぱいに広がります。
が、テキストフィールドやテキストエリアはデフォルトが幅100%ではないため、フォームの幅までは広がりませんでした。Contact Form 7 に詳しくないのでどう調整するのがベストかはわからないのですが、Contact Form 7 にテキストフィールドやテキストエリアのサイズを設定する項目があればそれで設定、なければ CSS で
width: 100%を追加する、のようなカスタマイズが必要になるのかなと思います。そもそもフォーム自体も横いっぱいに広がらないということであれば、使っているテンプレートとか追加している CSS が影響しているとか色々可能性が考えられるので、実際のページの URL をここで共有して直接見せていただければと思います。
いいねをした人：
