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

  • H

    お世話になります

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

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

    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/

    0 1 件の返信

  • @hiro1234567 さん

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

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

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

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

    0
    H
     1 件の返信
  • H

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

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

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

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

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

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

    0 1 件の返信

  • @hiro1234567 さん

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

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

    0
  • H

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

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

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

    0 1 件の返信

  • @hiro1234567 さん

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

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

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

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

    0