WordPressでカラム落ちさせる

CSS
2024.04.05

1、ブロックエディタでの操作

  1. カラムで入れる
  2. モバイルでは縦に並べる（デフォルト）のまま
  3. クラス名「column-ochi」を入れる（flexかかってる「wp-block-columns」の要素に）
  4. 中のカラム（アイテム要素にあたる「wp-block-column」）に幅指定する。
    ＊CSS記述時に無効化されるけど指定がないと指示が効かなかったので。
    ＊max-widthの値より大きい値で幅指定しておくこと。

2、CSSへの記載

CSS
/*=======================================
画面幅によってカラムを　1つ　→　2つ　→　3つ　横並びにさせる
========================================*/


/*カラムに元々 nowrap の指定がされているので強制変更*/
.column-ochi {
	flex-wrap: wrap !important;
	justify-content: center;
	gap: 30px 20px;
}
.column-ochi .wp-block-column {
	max-width: 230px;
}


/*レイアウトがこじんまりになるのでタブレット〜PCでサイズ変更*/

@media (min-width: 768px){
	.column-ochi {
	gap: 50px 50px;
}
.column-ochi .wp-block-column {
	max-width: 300px;
}
}