Gutenberg のカラムブロックをタブレット幅（481～768px）では１カラムにはしないカスタマイズ

Cocoon 設定 → 管理者画面 → 管理者パネル。とても便利で重宝させてもらってます。

その内の「Responsinator」チェックをすると、上記サムネイルの様にカラムで作成したページの見栄えが良くないのでカッコよくしたい。

早速ググってみると、、、わいひらさん、さすがです。既に解消方法を提示されていました。

Cocoon の 2・3 カラムをタブレット幅（481～768px）では 1 カラムにはしないカスタマイズ方法

タブレット端末では 1 カラム化しない 2 カラム、 3 カラムレイアウトの CSS 指定方法です。

 /*768px 以下 */ 
 @media screen and (max-width: 768px){ 
   .column-wrap{ 
     flex-direction: row; 
   } 
 } 

 /*480px 以下 */ 
 @media screen and (max-width: 480px){ 
   .column-wrap{ 
     flex-direction: column; 
   } 
 }

提示された通り、 css を追加します。

、、、がダメ。何故か？ Cocoon のカラム分割を使っていなかったからですｗ

WordPress 新参者の thx.jp がコンテンツを作り始めたのは、丁度 Gutenberug が出始めた頃です。

今後ブロックエディタが主流になっていくのであれば、如何に Cocoon 謹製ショートコード群が便利であろうとも、 Classics エディタよりもブロックエディタに慣れるべき。と決意したからです。

今回はそんなニッチな利用者の Tips です。

カスタマイズは自己責任でお願いします。
wp-cocoon.comサイトのサポート対象外となります。

カスタマイズ方法
1. Cocoon Child: スタイルシート (style.css)

カスタマイズ方法

Cocoon Child: スタイルシート (style.css)

Cocoon Child のスタイルシート (style.css) に下記を追加します。

 /*768px 以下 */ 
 @media screen and (max-width: 768px){ 
	 .column-wrap, 
	 .wp-block-columns.has-2-columns { 
		 flex-direction: row; 
		 flex-wrap: nowrap; 
	 } 
 } 

 /*480px 以下 */ 
 @media screen and (max-width: 480px){ 
	 .column-wrap, 
	 .wp-block-columns.has-2-columns { 
		 flex-direction: column; 
	 } 
 }