ページ内目次

Elementor のタブウィジェットで、モバイルでも水平と均等配置にする

Elementor 標準のタブウィジェットでは、PC表示の場合にはタブの水平配置や均等配置ができるのですが、モバイルの場合には自動的に垂直配置となってしまい、均等配置も無視されてしまいます。

これが意外と色んな場面で出くわして、不自由するのですが、以下のスタイルを追加するだけで簡単に実現できます。

/* モバイルでもタブを水平に */
@media (min-width: 320px) {
	.elementor-tabs-view-horizontal .elementor-tabs-wrapper {
		display: flex;
		flex-direction: row;
	}
	.elementor-tabs-view-horizontal .elementor-tab-mobile-title {
		display: none;
	}
}
/* タブサイズを均等に */
@media (min-width: 320px) {
	.elementor-tabs-alignment-stretch .elementor-tabs > .elementor-tabs-wrapper {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.elementor-tabs-alignment-stretch .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-title {
		-ms-flex: 1 1 auto !important;
		flex: 1 1 auto !important;
	}
}

min-width を320としているのは、「それよりちっそきゃガラケーだろっ」ということです。

水平配置の場合の「elementor-tabs-view-horizontal」と、均等配置の場合の「elementor-tabs-alignment-stretch」は、それぞれ以下のように Elementor の設定画面で指定することが自動的に付加される属性ですので、敢えてCSS ID や CSS クラスをタブに指定する必要はありません。

↑上へまいりま〜す