[saka]

【お使いの Snow Monkey のバージョン】 15.9.4
【お使いの Snow Monkey Blocks のバージョン】12.5.0
【お使いの Snow Monkey Editor のバージョン】6.1.0
【お使いのブラウザ】chrome
【当該サイトのURL】

### 実現したいこと

横（水平）スクロールをCSSで簡単に実装する方法

ブログの記事下に設置する関連記事やランキングなど、複数の記事を一覧表示させるときに、カードタイプのアイテムを横スクロールを実装するようなデザインが増えてきまし…

296.co.jp

「お客様の声」の箇所を上記の記事のように横スクロール表示にしたい

### 発生している問題

表示カラム数を増やすと細くなる。

それぞれの項目を2カラム程度の幅でスクロール表示させたいです。

### 試したこと

.horizontal-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.voice{
/* 横スクロール用 */
  display: inline-block;
  width: 90%!important;
  height: 500px;
}

以上です、宜しくお願い致します。。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

まず↑に書かれている CSS は全部消して、そのあとに下記の CSS を追加してみてください。

.horizontal-list.smb-testimonial .c-row {
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.horizontal-list.smb-testimonial .voice {
  flex-shrink: 0 !important;
}

PC は4個並びの設定になっていてスクロールしないので、PC も2個並びの設定に変更してみてください。

♥ 0

いいねをした人: 居ません

[saka]

ありがとうございます。PC も2個並びの設定に変更し、

.horizontal-list.smb-testimonial .c-row {
  flex-wrap: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

１つ目の部分を上記に変更したらスクロールできるようになりました！使い方はこれで合っているでしょうか、、？

またお手数ですがトピック閉鎖の際に当該サイトのURLを削除頂けますと幸いです。
よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あ、そうです。それで大丈夫です。解決した場合はクローズをお願いします！

♥ 1

いいねをした人:

[投稿者]

投稿