# コレクションリストの表示について

**URL:** <https://community.shopify.com/t/topic/345887>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [August 6, 2024, 5:13am UTC](https://community.shopify.com/t/topic/345887 "2024-08-06T05:13:43Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Spotlightテーマを使用したサイトで、コレクションリストの表示に関する問題が発生しています。

**問題点:**
- トップページに複数のコレクションリストを配置
- コレクションが1つしかないリストでは、デスクトップの列数を4列に設定してもサムネイルが大きく表示されてしまう
- 設定した列数通りに表示させたい

**解決方法:**
- CSSで列の幅を固定することで対応可能
- `.card-wrapper.animate-arrow.collection-card-wrapper`に対して幅を指定
- 4列表示の場合は`width: 25%`を設定（100%を4分割）

**結果:**
質問者は提案されたCSS調整により、無事に問題を解決できました。

<div class="post-metadata">

**Author:** ![hirose](https://avatars.discourse-cdn.com/v4/letter/h/7ea924/32.png) [@hirose](https://community.shopify.com/u/hirose)\
**Post date:** [August 6, 2024, 5:13am UTC](https://community.shopify.com/t/topic/345887/1 "2024-08-06T05:13:43Z")

</div>

無料テーマのSpotlightを使用してサイトを構築しています。

トップページにコレクションリストを複数並べているのですが、その中にはコレクションを1つしか表示しないコレクションリストがあります。

その場合、デスクトップの列数を4列などに設定してもサムネイルがかなり大きく表示されてしまいます。

コレクションが1つの場合でも設定した列数で表示させたいです。

何か対策はありますでしょうか。

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

↓複数コレクションがある場合

 ![スクリーンショット 2024-08-06 14.06.22.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/5/8526a76d18fedd8c796e256c560e92ffb3c5f432.png)

↓コレクションが1つの場合 これを上のサイズ感で表示させたい

 ![スクリーンショット 2024-08-06 14.08.39.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/3/03adc08fcf6d5b73996ca61e7633d3d646fb6ad5.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [August 6, 2024, 10:36am UTC](https://community.shopify.com/t/topic/345887/2 "2024-08-06T10:36:26Z")

</div>

質問拝見しました。

こちら自動で幅が調整されているかと思いますので、表示する列数を決めてその幅を維持するようなCSSを加えれば対応が可能かと存じます。

```markup
.card-wrapper.animate-arrow.collection-card-wrapper{
width:25%
}

（四列表示を想定100を四分割で25%になっています。）

```

以下CSSを参考に調整してみてください！

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![hirose](https://avatars.discourse-cdn.com/v4/letter/h/7ea924/32.png) [@hirose](https://community.shopify.com/u/hirose)\
**Post date:** [August 7, 2024, 12:27am UTC](https://community.shopify.com/t/topic/345887/3 "2024-08-07T00:27:02Z")

</div>

無事、修正できました！

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