メディアクエリ、理解の為、以下を一読する事をお勧めします。

https://www.seojuku.com/blog/responsive-mediaquery.html#CSS_media_Web

chu-ya様

ご連絡ありがとうございます。　また、メディアクエリの件ありがとうございました。

勉強になります。　下記のような感じでCSSに追加したのですが、モバイル上では何も変化は起こりません。そもそも、sns-follow-buttonsではないのでしょうか？

/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
.sns-follow-buttons a.follow-button {
border-radius: 50%; /*丸くする*/
width: 1px;
height: 15px;
font-size: 10px; /*アイコンのサイズ*/
margin-left: 19px; /*左側の余白*/
background-color:#000;
}
}

以上、よろしくお願いいたします。

@bravo0916 さん

メディアクエリをよく理解して下さい。
画面サイズが1023px以下なら、書かれているCSSが適用になります。
結果、iPhoneX Maxは1023pxより画面が小さいので、適用されません。

頂いたURLですと、iPhoneX Maxの縦幅が下記のように414pxですので、

480px以下のところに記載すればよいですよね？　しかしながら、SNSアイコンの変化はありません。　もしよろしければ、どなたか下記のパラメーターであっているのかご教示いただけますでしょうか。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.sns-follow-buttons a.follow-button {
border-radius: 50%; /*丸くする*/
width: 1px;
height: 15px;
font-size: 22px; /*アイコンのサイズ*/
margin-left: 0px; /*左側の余白*/
background-color:#000;
}
}

@bravo0916 さん

このようなものでどうでしょうか。既存の CSS が分からないため、その SNS アイコンに関する全てを書いています。

.header-container {
  padding: 0 16px;
}

.header-in {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.header-in .sns-follow {
  display: flex;
  margin: 0;
}

.header-in .sns-follow-message {
  display: none;
}

.header-in .sns-buttons {
  gap: 8px;
}

.header-in .follow-button[class] {
  background-color: transparent;
  font-size: 24px;
  margin: 0;
  width: 45px;
}

※ もし、この CSS で変化しない場合は、子テーマの style.css に問題があるかもしれません。

添付動画は完成図です。

@bravo0916 さん

書いた通り反映されています。
以下のCSSですが幅の指定がないので、円にはなりません。
またclassですがbc-brand-color.sns-follow .twitter-buttonが優先されるので、背景黒とはなりません。
デベロッパーツールで確認願います。

@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  .sns-follow-buttons a.follow-button {
    border-radius: 50%;
    /*丸くする*/
    width: 1px;←幅がない！！！！！！！
    height: 15px;
    font-size: 22px;
    /*アイコンのサイズ*/
    margin-left: 0px;
    /*左側の余白*/
    background-color: #000;
  }

Akira様

フィードバックありがとうございます。　ご教示頂いたCSSと、こちらで少し追加した結果、無事にうまくいきました。　本当にありがとうございました。　最後に一つ質問で恐縮ですが、モバイル設定にて、トップメニューを表示にしております。　添付ファイルをご覧いただきたいのですが、このMENUを、下のヘッダー部分に入れ、「MENU」という英文を削除して横三本線のみを表示というのは可能なのでしょうか？　以前、ご指摘されていた、function.phpに記載となるのでしょうか？　何度も申し訳ございません。　もし何かおわかりでしたらご教示頂けると幸いです。

chu-ya様

ご指摘ありがとうございます。　初心者な為、とんちんかんな質問をしてしまい申し訳ありません。　いろいろと教えていただき感謝しております。

以下の通りです。

.slicknav_menu .slicknav_menutxt {
  display:none;
}
.slicknav_menu .slicknav_icon {
  margin:0;
}

投稿者:: @bravo0916

添付ファイルをご覧いただきたいのですが、このMENUを、下のヘッダー部分に入れ、「MENU」という英文を削除して横三本線のみを表示というのは可能なのでしょうか？　以前、ご指摘されていた、function.phpに記載となるのでしょうか？

カスタマイズすれば可能です｡CSSでもできますが、今回のケースで言えばfunctions.phpを用いたPHPカスタマイズの方がスマートな方法かもしれません。

やり方は、以下のPHPコードをfunctions.phpに追記する形でコピペすればできるかと思います。

//「トップメニュー」の「MENU」を削除する
add_filter('wp_enqueue_slicknav_label', function(){
  return '';
});

あ…、chu-yaさんがCSSでの実装方法を先に書いておられました。
CSSでも、PHPでも見た目は同じになるので、どっちでも良いとは思います。

わいひら様　chu-ya様

ご指摘いただきましたパラメータをfuncitons.php又は、CSSに記載して表示できました。　ありがとうございます！　尚、このMENUをソーシャルアイコンが表示しているヘッダーに移動したのですが、この場合は、下記のようなパラメータ値をfunctions.phpに追加でしょうか？　こちらで試したのですが、うまくいきません。　恐らく、get_template_xxxxxみたいなものを記載して、MENUアイコンのある場所を指定するのでしょうか？

add_action('wp_slicknav_menu', function(){
return'';
});

@bravo0916 さん

添付した動画は、ご希望に沿いますか？

もし、ご希望に沿う場合は、最初からやり直すのがいいと思います。

尚、「MENU」という英文を削除しただけではアクセシビリティの面で問題です。aria-label の追加が必要です。

申し訳ありません。修正します。

サイトタイトルを考えたら、CSS を追加するだけの方が楽かもしれません。

子テーマの style.css の上部に以下の部分があります。

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

ここに CSS を追加し、このようにすれば先程の添付動画と同じになります。

※ 背景色の変更は別途指定が必要です。

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .header-in .sns-follow {
    left: 0;
    position: absolute;
    top: 0;
  }
}

また、「MENU」という英文を削除すると、スクリーンリーダーを利用している方は、そこが何なのか全く分からなくなります。そこで、スクリーンリーダーに対し、「MENU」に代わる説明を追加するのがいいと思います。子テーマの javascript.js に以下リンク先のコードを追加します。

https://notepad.pw/share/ekkubd9p1

尚、サイトタイトルを非表示にするのもアクセシビリティの面で問題が発生します。

Akira様

詳細なご回答ありがとうございます！　こちらで試してみましたが、SNSアイコンが上に移動して、MENUと同じ位置にきました。　しかしながら、下記のヘッダー部分（添付ファイルの赤線）が残っています。　これを削除又は、MENUのみを下のヘッダー部分に移動してSNSアイコンと同じ位置にするのは可能でしょうか？　スクリーンリーダの件、フォロー頂きありがとうございます！　感謝いたします。

@bravo0916 さん

可能ですが、現在の状態を拝見しないと解決方法が分かりません。

サイトタイトルに関係していると思いますが、サイトタイトルはどのようにされていますか？

尚、前回のトピックにも書きましたが、サイトタイトルを非表示にするのは問題です。アクセシビリティで間違いなく問題が生じます。また、いわゆる SEO にも悪影響が出るかもしれません。

@Akira様

ご連絡ありがとうございます。　現状ですが、サイトタイトルのところは空白となっています。　何か良いタイトルか、ロゴを考えたのですが、デザインを考慮すると何も入れない方が良いかなと考え空白にしています。　まずは、デザイン優先で、その後のSEO等については検討していけたらと思います。　如何でしょうか。

@bravo0916 さん

Cocoon 設定 > ヘッダーの「高さ（モバイル）」に数値を入力されていますか？

もし、入力されている場合は、その数値の削除でご希望に沿うと思います。

数値を入力されていない場合は、実物を拝見しないと分かりません。

Akira様

こちらで設定してみましたが、無事に表示されるようになっています。　貴重なお時間を頂き、本当にありがとうございました。　

chu-ya様、　わいひら様

色々とサポート頂き感謝しております。　有難うございました。