モバイル表示を3列にしたい

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

Debutテーマのモバイルでトップの特集コレクションを3列表示にしたい要望。現在はモバイルが2列固定仕様。

提案：CSSで3列に変更。メディアクエリを使い、幅749px以下で列幅とクリアを調整。

コード要点：

  • @media (max-width: 749px)
  • .small–one-half の width を 33.333% に設定
  • .grid–uniform .small–one-half:nth-child(2n+1) の clear を none に設定

注意：テーマのバージョンや記述箇所によっては意図通り表示されない可能性あり。

アクション：テーマのCSSに上記を追加して表示を確認。うまくいかない場合は記述箇所の見直しや追加サポートを依頼。

現状：具体的解決策は提示済み。採用・動作確認の報告はなく、結論は未確定。

1

お世話になっております。

Debutテーマを使用しております。

モバイル表示でトップページの特集コレクションを3列で表示させたいです。

どのようにコード編集しましたら3列になりますでしょうか。

お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。

2

SLDOさま

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

モバイルの表示もカスタマイズから切り替えられたら嬉しいですよね。

Debutの場合、モバイルは2列で固定表示となっていますので、3列にされたい場合はcssを調整すると良いかと存じます。

Debutのコードを見たところ、下記cssコードを追加されると3列表示に変更可能でしたので、お試しくださいませ。(テーマのバージョン、コードの記述箇所によってはうまく表示されない可能性もございます。)

@media only screen and (max-width: 749px) {
  .small--one-half {
      width: 33.333%;
  }
.grid--uniform .small--one-half:nth-child(2n+1) {
    clear: none;
  }
}

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 園畑