# Help in CSS

**URL:** <https://community.glideapps.com/t/help-in-css/72562>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [April 14, 2024, 8:53am UTC](https://community.glideapps.com/t/help-in-css/72562 "2024-04-14T08:53:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mylengua](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@Mylengua](https://community.glideapps.com/u/Mylengua)\
**Post date:** [April 14, 2024, 8:53am UTC](https://community.glideapps.com/t/help-in-css/72562/1 "2024-04-14T08:53:00Z")

</div>

Dear Community,

I need a help in CSS. If it’s possible to change aspect ratio of image in in card/grid collection with CSS, please help me with it.

I have a classic app with numerous flashcards with 3:4 aspect ratio. While migrating the images to new app, the images don’t fit in collection. As of now I have been using image component and showing one image at a time, but with collection, I can horizontal and vertical scroll just like class apps.

If it’s possible with CSS, I’ll switch from Legacy plan to maker plan and add CSS to change the aspect ratio.

Regards,  
Chirag

---

<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:** [April 14, 2024, 9:03am UTC](https://community.glideapps.com/t/help-in-css/72562/2 "2024-04-14T09:03:27Z")

</div>

I think it’s definitely doable. What type of collection will you be using?

---

<div class="post-metadata">

**Author:** ![Mylengua](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@Mylengua](https://community.glideapps.com/u/Mylengua)\
**Post date:** [April 14, 2024, 9:07am UTC](https://community.glideapps.com/t/help-in-css/72562/3 "2024-04-14T09:07:58Z")

</div>

Most probably grid.

---

<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:** [April 14, 2024, 9:08am UTC](https://community.glideapps.com/t/help-in-css/72562/4 "2024-04-14T09:08:38Z")

</div>

Can you share some sample image URLs that you are using?

---

<div class="post-metadata">

**Author:** ![Mylengua](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@Mylengua](https://community.glideapps.com/u/Mylengua)\
**Post date:** [April 14, 2024, 9:41am UTC](https://community.glideapps.com/t/help-in-css/72562/5 "2024-04-14T09:41:43Z")

</div>

Here are some samples:

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/f/6f03ffc7340b3949f2c972c03f60eb5708fc830a.jpeg)  
 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/89699d67a905f0c3d2f0a27ecd5bc9f93cd64616.jpeg)  
 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/8715a18311b324c18196acd0679923af8e8da7d5.jpeg)  
 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1e3e5ab62181b41cc564afcf1fd85e757effc0a.jpeg)  
 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/6/56e36007bfd325dc3e4f7c34172ff6158a1a8397.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:** [April 14, 2024, 12:37pm UTC](https://community.glideapps.com/t/help-in-css/72562/6 "2024-04-14T12:37:04Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/4/e44ff2ffadcb33f63cc80520b844155ee49800fb.jpeg)

```auto
.card-collection .aspect-four-by-three {
padding-top: 125%;
}

```

I name my collection’s CSS class “card-collection”. Setup with size L, original aspect ratio 4:3.

---

<div class="post-metadata">

**Author:** ![Mylengua](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@Mylengua](https://community.glideapps.com/u/Mylengua)\
**Post date:** [April 14, 2024, 3:57pm UTC](https://community.glideapps.com/t/help-in-css/72562/7 "2024-04-14T15:57:42Z")

</div>

Thanks a lot brother for your help 🙂 👏

---

<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:** [April 21, 2024, 3:57pm UTC](https://community.glideapps.com/t/help-in-css/72562/8 "2024-04-21T15:57:52Z")

</div>

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