スマホでのカラム表示について



  • お世話になります

    カラム表示についてご質問がありまして

    3カラム表示をした場合
    PCでは3カラム表示されますが
    スマホはデフォルトでは1列表示になってしまうかと思います

    3カラム表示を
    スマホでは2カラム表示、3カラム表示などで
    横に並べる方法があれば教えていただけますと助かります

    ちなみに調べる中で
    こちらの記事に出会い試してみましたが
    「このブロックでエラーが発生したためプレビューできません。」となり
    解決できませんでした。
    https://nagomi-log.com/2column/

    他の方法をご存知の方がいらっしゃれば
    ご教示いただけますと助かります
    0_1669424231740_IMG_D0A8FBEA3FED-1.jpeg
    よろしくお願いいたします


    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : WordPress 6.1.1
    ご利用のサーバー名 : ConohaWing
    PHPのバージョン :
    OS : MacOS Ventura13.0.1
    ご利用のブラウザ : GoogleCrome
    該当サイトのURL : https://smartist-hiro.com/



  • @hiro1234567 さん

    こんにちは!
    共有ありがとうございます。

    こちらのテストサイトですと、以下の追加 CSS で対応できそうでしたが、
    単純に横並びにしただけなので、調整は必要になるかと思います。

    @media screen and (max-width: 767px) {
    	.home .wp-block-columns {
    		flex-wrap: nowrap!important;
    	}
    }
    

    調整については hiro1234567 さんの方でお願いできれば幸いです。
    よろしくお願いいたします!



  • スマホでのカラム表示についてで@tsu_が発言 :

    @media screen and (max-width: 767px) {
    .home .wp-block-columns {
    flex-wrap: nowrap!important;
    }
    }

    お忙しい中ご返信いただきありがとうございます!

    早速追加CSSで試してみましたが
    残念ながらスマホ表示が変わりませんでした

    CSS初心者で改善方法がわからず
    大変恐縮ではございますが
    原因や対策などお分かりになれば
    ご教示いただけますと助かりますm(_ _)m

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



  • @hiro1234567 さん

    ちなみに追加 CSS の一番上に書くとどうでしょうか??

    ご確認よろしくお願いいたします!



  • 一番上に追加したら無事、PCと同様な表示に切り替わりました!
    ご丁寧にご対応いただきありがとうございます!

    CSSなど不慣れで初歩的な質問だったかと思いますが
    本当に助かりました;;

    また質問がある際にはよろしくお願いいたします!



  • @hiro1234567 さん

    ご報告ありがとうございました!

    いえいえ、とんでもないです。

    本来なら一番下に書き足すパターンが多いので、
    おそらく追加 CSS の下の方で不備があるのかもしれませんね。。。
    (途中で不備があると、一番下に記述した内容が反映されなかったりします)

    引き続き、よろしくお願いいたします。
    (ご確認いただければ、ご返信には及びません)