ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される。
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置されるここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される
ここはモバイルにした時に左のカラムが下に、右のカラムが上に配置される。
まず行の「詳細」タブ→「CSSIDとクラス」→「CSSクラス」に「mxn_custom_row」を追加。
更にこの文章の列の「CSSクラス」に「mxn_mobile_order2」を右のハンバーガーの画像の列に「mxn_mobile_order1」を追加する。
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される。
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置されるここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される
ここはモバイルにした時に左のカラムが下に、右のカラムが上に配置される。
まず行の「詳細」タブ→「CSSIDとクラス」→「CSSクラス」に「mxn_custom_row」を追加。
更にこの文章の列の「CSSクラス」に「mxn_mobile_order2」を右のハンバーガーの画像の列に「mxn_mobile_order1」を追加する。
テストテキスト
ここはモバイルにした場合は普通に左のカラムが上、右にカラムが下に配置される。
左の画像は背景画像左の画像は背景画像左の画像は背景画像左の画像は背景画像
「テストテキスト」は幅を200pxにして、位置を絶対にしている。
「テストテキスト」は幅を200pxにして、位置を絶対にしている。
ここはモバイルにした時に右のカラムが下に、左のカラムが上に配置される。
ここはモバイルにした時に右のカラムが下に、左のカラムが上に配置される。
ここはモバイルにした時に右のカラムが下に、左のカラムが上に配置される。
左のカラムにwidth:15% !important;を入れている。右のカラムは85％
display:inline-blockを無くすと、
文章が短くなっても吹き出しの幅は列の幅で100％になる。
これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。
左のカラムにwidth:15% !important;を入れている。右のカラムは85％
文章が短くなっても吹き出しの幅は列の幅で100％になる。
これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。
これはサンプルテキストです。
左のカラムにwidth:15% !important;を入れている。右のカラムは85％
文章が短くなっても吹き出しの幅は列の幅で100％になる。
これはサンプルテキストです。
これはサンプルテキストです。これはサンプルテキストです。
■スマホでも２列キープ
横並びをキープする列
display:flex; で横並び。
隙間は column-gapを指定すれば良さそうだけど、上手くいかなかったのでタブレット以下のカスタムcssで列にmarginを指定している
ちなみにタブレット以下の列にmargin-bottom:0; も指定している。
これはタブレット以下で列の高さが合わなくなるのを防止するため。
■スマホでも３列キープ
横並びをキープする列
display:flex; で横並び。
column-gapを指定すれば良さそうだけど、上手くいかなかったのでタブレット以下のカスタムcssで列にmarginを指定している
ちなみにタブレット以下の列にmargin-bottom:0; も指定している。
これはタブレット以下で列の高さが合わなくなるのを防止するため。
３列でもタブレット以下でもキープ
■普通の４列 高さ揃えとタブレット以下の隙間調整済み
これは4列の行
何もしなくても
タブレットで2列
スマホで１列にしてくれる。
サンプルテキスト
でもタブレット時の隙間が気に入らなかったので、タブレット時はwidth:49%;にして、marginのleftやrightを1%にしてみた。スマホは width:100%; に戻す。
■普通の６列 ６→３→１ 高さ揃えとタブレット以下の隙間調整済み
これは６列の行
何もしなくても
タブレットで2列
スマホで１列にしてくれる。
サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
やはりタブレット時の隙間を１％にしてみた。
列の幅は32.333%で両端は1%、真ん中は0.5%のmargin
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
■６列 ６→３→２ 高さ揃えとタブレット以下の隙間調整済み
これは６列の行
何もしなくても
タブレットで2列
スマホで１列にしてくれる。
しかし、これはスマホでは２列にしてみた。
やはりwidthは４９％でmarginは１％
サンプルテキスト
サンプルテキストサンプルテキスト