# How to reduce the gap of a collection

**URL:** <https://community.glideapps.com/t/how-to-reduce-the-gap-of-a-collection/77472>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [October 30, 2024, 1:46pm UTC](https://community.glideapps.com/t/how-to-reduce-the-gap-of-a-collection/77472 "2024-10-30T13:46:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luiz\_Roberto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luiz_roberto/32/80972_2.png) [@Luiz\_Roberto](https://community.glideapps.com/u/Luiz_Roberto)\
**Post date:** [October 30, 2024, 1:46pm UTC](https://community.glideapps.com/t/how-to-reduce-the-gap-of-a-collection/77472/1 "2024-10-30T13:46:22Z")

</div>

I have a horizontal card collection that I would like to simulate Instagram stories. It looks great on mobile, but when I access it on Windows, the space between one image and another is too big.

On mobile, 4 photos appear, on Windows (which has a much wider screen) I would like 8 to appear. The problem is that there are only 6 photos, leaving a very large gap between one image and another.

Is there any way to adjust this using custom CSS?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a645b631b9c6ab3ab241fa62345709902687c3dd.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe5d876af6758f1a5aa005298191e4133109b5b1.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2024, 3:05pm UTC](https://community.glideapps.com/t/how-to-reduce-the-gap-of-a-collection/77472/2 "2024-10-30T15:05:03Z")

</div>

The issue doesn’t lie with the gap but rather with the card size. Try testing the following code:

```auto
#page-root .collection-class [data-testid="cc-card"] {
  width: calc(12.5% - var(--grid-gap) * (4 / 4));
}

#page-root .collection-class [data-testid="horizontal-collection-container"] {
--grid-gap: 10px;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 6, 2024, 3:05pm UTC](https://community.glideapps.com/t/how-to-reduce-the-gap-of-a-collection/77472/3 "2024-11-06T15:05:43Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.