スマホでもカラムを維持するCSS

WordPressではカラムブロックで並べた横並びのコンテンツを作ることができます。カラムブロックの各列にそれぞれ画像や段落など任意のブロックを挿入することができて便利だなーと思ってたのですが、パソコンとスマホで表示のされかたが違うんですよね。

こちらのレシピページ、パソコンで見たら上のように写真とレシピリンクが横並びなのですが、スマホで見たら縦になってしまってました😰

このように、写真がバーンと表示されて、その下にレシピリンクが表示されてます。
これでも画像が大きくて見やすいかもしれないですが、今後公開レシピが増えるとちょっと場所取りすぎで探しにくいかなあと。
今のご時世、パソコンよりスマホで見る人のほうが多いので、スマホで見ても横並びにするようにしたい…！ということで、テーブル使って作り替えようかなと思ったのですが、うまく調整できず😂

調べてみたら、CSSを追加してスマホでも横並びにできるということなので、早速設定してみました。
アスリーマン | やるときはやる男になる (athleadman.net)さまのサイトで解説されていたので参考にさせていただきました。

外観→カスタマイズ→追加CSS　
下記コードをコピペ

/*スマホ横並び維持*/
.ath-colfix{
flex-wrap:nowrap;
}
@media (max-width: 599px){
.ath-colfix .wp-block-column:not(:first-child) {
    margin-left: 5px;
}
}

アスリーマン | やるときはやる男になる (athleadman.net)　【WordPress】スマホでも2カラム・3カラムを維持するCSS【コピペOK】　より引用

カラムブロックでの設定は、右側の設定の一番下に「高度な設定」のところに「ath-colfix」を追加します。