どの過去トピックを参照しましたか？
トピックのURLも貼っていただけると幸いです。

お返事ありがとうございます！

下記二つです。

https://wp-cocoon.com/community/customs/%E4%BA%BA%E6%B0%97%E8%A8%98%E4%BA%8B%E3%82%92%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84/

https://wp-cocoon.com/community/customs/%E4%BA%BA%E6%B0%97%E8%A8%98%E4%BA%8B%E3%82%92%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F/

よろしくお願いいたします。

人気記事とはこの部分ですか？

人気記事ウィジェットの「表示タイプ」を「大きなサムネイル」系にしてみましたか？

その箇所であっています。タイトルを重ねた大きなサムネイルに変更してみましたが、大きくなって縦に並んでしまっています。。。本当は希望イメージサイトのように上段に尚且つ横並びにしたいのですが、今のまま上段に表示させると見栄えが悪いのでとりあえず一番下に置いています。。。

popular_entriesのIDが違いますよ。
該当部分のものは13です。

しかしこちらは、CSSセレクタのIDの数字が14になっています。
過去のトピックのものをコピペで利用するにしても、ウィジェットIDが割り振られているものは、自分の環境に合わせてIDを書き換える必要があると思います。

お世話になっております、ありがとうございます。

ID調べたつもりだったのですが申し訳ないです。ただ13に書き換えても横になりませんでした...。

斜め読みで、あまりよく理解していなのですが、以下を足したら、横にならびました。

.popular-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb-on {
display: flex;
}

トップページ限定なら、

.front-top-page .popular-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb-on {
display: flex;
}

とか・・・

本当に適当に書き込んでいます。

すみません。

酔っぱらっては、いませんけど。

またまた、適当に・・

@media screen and (max-width: 480px){
#popular_entries-13 .popular-entry-cards.large-thumb-on a {
width: 48%;
}
}

参考程度・・

まとまりのない、無責任な書き込みです。

ありがとうございます。やってみましたが変わらずでした。。。ですが、スマホから確認してみたところ少しだけ横並びになっていました。（数は３に減らしています）

スマホからもPCからも３つ横並びにするのが理想なのですが厳しいでしょうか...。

@あられ さん

スマホも３つ横並びがご希望なんですね？

とても、ちっちゃいので、見づらいですけども。

CSSは、子テーマの一番下に書きましたか？

下の画像はPC表示。

@あられ さん

CSSはちゃんと書き込まれているようですが、なぜか効きませんね。

差し支えなければ、環境情報を、コピーして貼り付けていだだけますか？

@あられ さん

CSSを書く場所を少し変えてみてください。

子テーマのCSSに書くのは同じなんですが、ちょっと位置を変えます。

上の方に移動します。

@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.front-top-page .popular-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb-on {
display: flex;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

これで書きこむ位置がわかりますでしょうか？

黄色が追記するコードです。

先ほど、一番下に追記したコードは削除してください。

@あられ さん

CSSのメディアクエリの書き方ですが、メディアクエリというのは、入れ子の構造になっています。

例えば、幅が480px以下の画面だけに適用させたいときは、

@media screen and (max-width: 480px){
ここにスタイルを指定する
}

このように指定します。

画面幅が480px以下の画面のときだけ .header の文字を赤にする、と言ったときは、

@media screen and (max-width: 480px){
  .header {
      color: red;
  }
}

このように指定します。

このとき、下の方に波括弧が２つ連続していることに注意してください。

これは、

  .header {
      color: red;
  }

これを、メディアクエリで上下にサンドイッチ、つまり挟んでいるんです。

なので、

@media screen and (max-width: 480px){
  .header {
      color: red;
  }
}

の一番下の波括弧は、必要なものなのです。

CSSを書くときは、この点にも注意してみてください。

ありがとうございます！黄色のコードを追記すると解決しました！！！本当に助かりました。ありがとうございました！

@あられ さん

子テーマのCSSの、

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

より下に書いたコードには、括弧が足りない箇所が数か所あります。

そのため、一番下に書いたときには、効かなかったのです。

もう一度、下の方のコードを見直してみて、間違いがあれば正し、不要なコードは削除しておくことをオススメします。

CSSと言えども、括弧がひとつ足りないだけでも、有効にならないばかりか、他のコードにも影響してしまう場合がありますので、基本に忠実に、丁寧な記述をなさってください。

なるほどです...!勉強になります。。。ありがとうございます。修正しておきます...!