[Dawnテーマ]ブログをスマホ時にスワイプではなく、2列表示したい

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

はじめまして、小島と申します。

Dawnテーマを使用する中で、ブログをスマホ時に2列並びにしたいと思っております。

初期の設定ではスワイプでしか表示できず、関連する記事を見受けられなかったためご存じの方おられましたらご教授いただけますと幸いです。

よろしくお願いいたします。

2

十分な検証はできていないので、

何かしら不具合が出るかもしれませんが、

下記のようにすることで、

Chromeでは2列並びにできました。

ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「アクション」 > コード編集

から、

アセット(assets) の section-featured-blog.css の最終行に下記を追加します。

@media screen and (max-width: 989px) {
  .blog__posts.articles-wrapper {
    flex-wrap: wrap; 
    gap: 1rem;
    padding: 0 1rem;
  }
  .blog .slider-buttons {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .blog__post.article {
    width: calc(50% - 0.5rem);
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: unset;
  }
}

もっと、

効率的な書き方もありますが、

取り急ぎ、すぐ実現できる方法を記載いたしました。

ご参考まで。

(キュー田辺)

1 Like
3

田辺 様

ご確認いただきありがとうございます。

実行したところ、うまく2列表示できました！

ご丁寧にありがとうございました。

1 Like