HTMLでレスポンシブ時に文字の大きさを小さくする方法についてです。

Question

前提・実現したいこと

ワードプレス（テーマ：affinger6）でサイトを作っています。
そこでヘッダー画像の上に文字を入れて表示したのですが（ヘッダーコンテンツ設定）、レスポンシブ時の文字の大きさが大きすぎるのでレスポンシブ時に文字を小さくする方法がわかりません。
いろいろ調べたのでわからなかったので質問させて頂きました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

ソースコード

初心者の為、質問の内容に不備があるかも知れません。
その場合、ご指摘お願いします。

Answer 1

font-size: xx-large;

となっているところを、〇〇vwという単位を使えば画面幅によって文字サイズが可変します。
このままだと小さくなりすぎたり大きくなりすぎたりするので、メディアクエリを使って適切な最小・最大サイズを設定してください。
CSS の値と単位

メディアクエリの使用