申し訳ないですが、サポート対象外のものにもあるように僕はカスタマイズ業者ではないので、複雑なカスタマイズは、自身で行っていただくか、クラウドソーシング等プロの方にご依頼いただければと思います。

アドバイスするにしても、できればスクリーンショット画像と同じ状態にしていただければ、その状態のソースコードを見て、アドバイスはできるかと思います。
カスタマイズ対象ページに、実際のものがない場合は、申しわけないですが、そこまでの対応はできないです。

ちなみに、おおよそタブレット以下で表示させたくない場合は、以下のようなメディアクエリ内に表示になるようなCSSコードを書けば良いかと思います。

@media screen and (max-width: 834px){

}

おおよそスマホ環境のみの場合は、こちらのメディアクエリ。

@media screen and (max-width: 480px){

}

わいひらさん

ご安心ください。何が簡単で何が複雑かすら分かっていない分際でただやりたいことを質問しているだけですので、あくまで簡単なものだけお答えいただいて大丈夫です。

今回は難しそうですし、ソースコードの件については関連記事ウィジェットをあの状態で表示させておくのは避けたいですので、何か別の方法を検討してみたいと思います。

公開ページを意図しない状態にしたくない場合は、テストサイトとかに同じ状態を再現したものでも大丈夫です（CSSとかは反映されていなくて素のCocoonで大丈夫です）。

これも環境を再現するのは、ちょっと面倒かもしれませんが^^;

わいひらさん

テストサイトを作るのが面倒なため（というより作り方が分からないため。。）、とりあえず次の投稿ページのコンテンツ上部に関連記事を1つだけ表示させてみました。

https://www.eevocablog.com/online-shopping/

メディアクエリ内に書くべきCSSコードが分からないため結局無理かもしれませんが。。

とりあえず「コンテンツ上部」ウィジェットエリア全体に適用される方法を書きました（関連記事ウィジェットに限定はしてないです）。

以下のようなコードお子テーマのstyle.cssに書けばいけるのではないかと思います。

.content-top{
  display: none;
  color: #fff;
  margin: auto 20px;
}
.content-top a{
  color: #fff;
}

@media screen and (max-width: 834px){
  .content-top{
    display: block;
  }
} 

※動作確認はしていません。うまくいかなければ、コードを適用したままの状態のまままた見せてください。
※メディアクエリはタブレット以下で非表示になるようにしました。

わいひらさん

ありがとうございます。見事にフッターの関連記事ウィジェットと同じ見た目・位置になりました。素晴らしいです。

ただ、位置が全体的にやや上に表示されていますので（グローバルナビメニューに近すぎる感じです）、できれば下の画面ショットの矢印方向に少し移動するようなイメージにしたいです。上余白を広げて下余白を狭くするといった感じでしょうか。

もしそれが難しいようであれば、「関連記事」というタイトルを非表示にしようと思うのですが、非表示にする方法が分かりません。。

わいひらさん

少し地味だったので関連記事ウィジェットのオプションを「タイトルを重ねた大きなサムネイル」に変えてみたところ、さらに良くなりました。ただ、次の画面ショットのように大きめのタブレットになると左側に寄っていて変な感じがします。

そこで、画面ショットを加工して画像の上下左右の余白を同じくらいの間隔にしたイメージを作成してみました。タイトルの「オススメ」を写真の左端に合わせたいのか中央にしたいのかはまだ分かりません。

＜タイトルを写真の左端に合わせたイメージ＞

＜タイトルを中央にしたイメージ＞

この上下左右の余白調節ができれば本件は解決になります。

よろしくお願いします。

タイトルの「オススメ」を写真の左端に合わせたいのか中央にしたいのかはまだ分かりません。

どっちかに決めていただければと思います。
何度も書くのも手間がかかるので。

わいひらさん

それでは中央に位置させる方法でお願いいたします。

あともう1点だけ申し訳ないのですが、タイトル（「オススメ」）の文字サイズを少し下げたいと思っています。その方法も併せて教えていただけると幸いです。

全部のCSSをあらためて書き直すと、こちら。

.content-top{
  display: none;
  color: #fff;
  margin: auto 20px;
}
.content-top a{
  color: #fff;
}
.content-top .main-widget-label{
  text-align: center;
  font-size: 12px;
}

@media screen and (max-width: 834px){
  .content-top{
    display: flex;
  }
}  

上記を子テーマのstyle.cssに記入すれば良いかと思います（前回挿入したcssと入れ替え）。

わいひらさん

ありがとうございます。適用したところ、意図したとおり左右の余白が均等になりました。ただ、上下のバランスについてはまだ「オススメ」がグローバルメニューに近すぎる状態ですので、上下を中央に位置させるテキストもお知らせいただけますでしょうか？

また、1点気づいたのですが、投稿タイトルの黒リボンと写真の底辺が少しずれているようです。底辺の位置を一致させる方法は何かありますでしょうか？

上下マージンについては、.content-topの上下マージンを変更してください。
http://www.htmq.com/style/margin.shtml

細かな部分の調整については可能な限りご自身でお願いします。
以下の方法などでデベロッパーツールで調査しながらいろいろ試すことができるので。
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

わいひらさん

ありがとうございます。正しいのかは分かりませんが、"auto 20px" の部分を "26px 0px -10px 0px" とすることで上下の余白のバランスを調節することができました。

写真と黒いリボンがずれている件については、デベロッパーツールについて調べる時間が当分なさそうですので断念することにします（それほど大きな問題ではないので大丈夫です）。

そんな感じで問題ないです。 値を4つ指定した場合は、上、右、下、左の指定になるので、それで大丈夫かと思います。