サイト内検索の検索ボックスがiPadから見るとズレています

[eguo]

気になることが何点かあるので質問させてください。

①iPadからサイトを見るとサイト内の検索ボックスが枠をはみ出て下にズレています。PCとスマホでの表示は問題ありませんが、PCではほんの少し下にずれています。iPadでの表示を改善したいです。

②コンテンツマガジンのカテゴリー名が、スマホやPCからだと1行で表示されるのですが、iPadから見ると7文字以上は2行での表示になります。1行で収めることはできますか？

③フッターのコピーライト横の開設年なのですが、去年サイトを作り出したので2020-2021と表示されるのかと思っていたのですが、ホームだけは-2021と表示されます。この表示が仕様の標準ですか？そうでないのであれば他ページと同じ様に表示させたいです。

---

マニュアル確認済み
キャッシュクリア済み
WordPressのバージョン : 5.8
ご利用のサーバー名 : エックスサーバー
PHPのバージョン : 7.4.13
OS : Windows10
ご利用のブラウザ : Safari14.4.2
該当サイトのURL : https://cattery-campanella.com/

[tsu_]

@eguo さん

こんにちは！

================================================
①「カスタマイザー」→「追加CSS」に以下の記述をお願いいたします。

@media screen and (min-width: 768px){
	.sidebar_style10 .widget {
    　　　padding: 15px 0 25px;
	}
}

================================================
② こちらは追加CSSに以下の記述を追加してみてください

.tabBtn-mag label {
    padding: 10px 0;
}

================================================
③現在は固定ページのみを作成されていて、投稿記事は作成されていない状況でしょうか？

お手数おかけしますが、よろしくお願いいたします。

[eguo]

@Tsuno_
ご返信ありがとうございます。
①追加cssに記述してみましたが特に変化なしでした。
②改善されました。ありがとうございます！
③現在は未投稿の状態です。試しに非公開で記事を投稿してみたところホームのコピーライトが-2021から2021に変わりました。これは投稿を始めた年から年を経るごとに2021-20○○という表示に変わっていくという解釈で良いですか？

[tsu_]

@eguo さん

①についてですが、Autoptimize が吐き出しているコードに
空白がある事が影響していると思うんですよね。。。

ですので、

●一度プラグインを停止してみる
●以下のように追加CSSのコードを空白無しにしてみる

@media screen and (min-width: 768px) {
.sidebar_style10 .widget {
padding: 15px 0 25px;
}
}

この2つを試してみていただけますか？？

================================================
③については、その解釈でほぼほぼ合っています。

投稿記事の一番古いものが基準になります。

[eguo]

@Tsuno_
ご返信ありがとうございます。
仰った通りにしてみたところ、iPadからの検索ボックスの表示は修正できました！…のですが、paddingの幅をいじるとPCの方も連動して幅が変わってきます。スマホの方の検索ボックスの表示も真ん中にならないのが気になってきてしまいました。PC、iPad、スマホそれぞれで幅を変えて設定したいのですが教えていただけないでしょうか？

それと細かいことなのですが、iPadでの検索ボックス内に表示されるアイコンが下寄りに表示されるのも気になります。

[tsu_]

@eguo さん

こちらのコードで対応できるかと思います！

@media screen and (max-width: 767px) {
.sidebar_style10 .widget {
padding: 15px 0 5px;
}
}

@media screen and (min-width: 768px) {
.sidebar_style10 .widget {
padding: 15px 0 25px;
}
.widget_search .search-box input[type=submit] {
top: 14px;
}
}

@media (min-width: 1024px) {
.sidebar_style10 .widget {
padding: 15px 0 10px;
}
}

[eguo]

@Tsuno_
ご返信ありがとうございます。
教えていただいたコードを記述したところアイコンの位置(検索ボックスの送信ボタン)のコードだけ効いていないような気がします。
Autoptimizeを停止してみたのですが改善されませんでした。お手数をおかけしますが再度改善策を教えていただけないでしょうか。

[tsu_]

@eguo さん

詳細度が低かったようですね。申し訳ありません。。
以下のコードでお願いいたします！

@media screen and (min-width: 768px) {
.sidebar_style10 .widget_search .search-box input[type="submit"]{
top: 14px;
}
}

[eguo]

@Tsuno_
ありがとうございます！
今まで気になっていたけど放置していたところが全部直ってすっきりしました。
またわからないことがありましたら質問させていただきますので、よろしくお願いします。