# Changing the aspect ratio of a collection

**URL:** <https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [September 10, 2025, 9:30pm UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317 "2025-09-10T21:30:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Bailey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_bailey/32/15001_2.png) [@Mark\_Bailey](https://community.glideapps.com/u/Mark_Bailey)\
**Post date:** [September 10, 2025, 9:30pm UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/1 "2025-09-10T21:30:59Z")

</div>

Hey Fellow Gliders,

I’m trying to change the aspect ratio of a collection and I’m struggling with the CSS.

Can someone help me change the height of the collection images so they remain the same width but increase in height.

the images I’m using are constant and are 447px x 669px. 2:3 ratio.

I’ve attached an image of what I’m currently showing in the UI.

Many thanks,

Mark

 ![Screenshot 2025-09-10 at 22.27.18](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c391232e2e604fe0df9abcdaa505f5e80949ad08.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 11, 2025, 1:44am UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/2 "2025-09-11T01:44:52Z")

</div>

I assume this is a card collection? What aspect ratio of the card collection are you using?

---

<div class="post-metadata">

**Author:** ![Mark\_Bailey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_bailey/32/15001_2.png) [@Mark\_Bailey](https://community.glideapps.com/u/Mark_Bailey)\
**Post date:** [September 11, 2025, 9:24am UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/3 "2025-09-11T09:24:38Z")

</div>

The ratio I’m looking to get is 2:3. Like what’s used for sports trading cards etc

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 11, 2025, 11:32pm UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/4 "2025-09-11T23:32:17Z")

</div>

I mean for the screenshot you posted above, I assume it’s a card collection. Can you tell me what aspect ratio you’re using for the screenshot (it affects the CSS you would want to use to get 2:3).

---

<div class="post-metadata">

**Author:** ![Mark\_Bailey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_bailey/32/15001_2.png) [@Mark\_Bailey](https://community.glideapps.com/u/Mark_Bailey)\
**Post date:** [September 12, 2025, 11:25am UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/5 "2025-09-12T11:25:43Z")

</div>

Here’s a screenshot of the settings I have for the image

 ![Screenshot 2025-09-12 at 12.25.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/967443ceb344f4cce0e5bb8cd363f377d3dc51de.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 13, 2025, 12:58am UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/6 "2025-09-13T00:58:32Z")

</div>

![CleanShot 2025-09-13 at 07.56.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/9/091a73295d32b5f73a882d5a552a74a1d8a6c444.jpeg)

You can try this.

```auto
.card-list-23 .aspect-square {
padding-top: 150%;
}

```

With card-list-23 being the class name of the card collection.

---

<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:** [September 14, 2025, 1:18am UTC](https://community.glideapps.com/t/changing-the-aspect-ratio-of-a-collection/84317/7 "2025-09-14T01:18:58Z")

</div>

Some classes aren’t tied to the component’s own settings. I’ve shared them in a few threads before, and they may be a better fit here since the OP doesn’t need to preserve those settings.