# Custom Collection Design - Image & CSS

**URL:** <https://community.glideapps.com/t/custom-collection-design-image-css/71635>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [March 12, 2024, 9:52pm UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635 "2024-03-12T21:52:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kiwi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kiwi/32/60332_2.png) [@Kiwi](https://community.glideapps.com/u/Kiwi)\
**Post date:** [March 12, 2024, 9:52pm UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/1 "2024-03-12T21:52:25Z")

</div>

Hi everyone - just wondering if you know how to adjust a custom collection to remove the padding. I want my image to be right to the edge of the collection item border like the attached screenshot.

I tried to use custom CSS class to change the image component but the padding is controlled with the custom collection component and I don’t know how to use CSS class to adjust the padding on custom collection.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc98334591e162b235ead91d2cb4d47801540b56.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:** [March 13, 2024, 12:08am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/2 "2024-03-13T00:08:45Z")

</div>

Here’s my best attempt. I haven’t found out what setting is causing the bottom border of the image to have a radius.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12fc6cdd38711faf811561a7f77a6242e0510a11.jpeg)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62336d4e67bfd6918e9c4b91f88e12c31ed82d4b.png)

The setup is like this. Image \> Aspect ratio = Auto, Size = Full.

Custom collection’s class name = “items”.

```auto
.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;
}

.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
}

```

---

<div class="post-metadata">

**Author:** ![Kiwi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kiwi/32/60332_2.png) [@Kiwi](https://community.glideapps.com/u/Kiwi)\
**Post date:** [March 13, 2024, 12:27am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/3 "2024-03-13T00:27:49Z")

</div>

This is great thank you! I will try it

---

<div class="post-metadata">

**Author:** ![Kiwi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kiwi/32/60332_2.png) [@Kiwi](https://community.glideapps.com/u/Kiwi)\
**Post date:** [March 24, 2024, 8:40pm UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/4 "2024-03-24T20:40:23Z")

</div>

I acheived the bottom flat radius by inserting a seperator and just making it into a thick white line using a border and removing the padding. Looks fab!

```auto
.white-line 
{
border-width: 10px;
border-color: #ffffff;
margin-top: -12px; 
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/dbf65270352858aaed85de450c33ba15ae4615d1.jpeg)

---

<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:** [March 24, 2024, 11:51pm UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/5 "2024-03-24T23:51:22Z")

</div>

Is this what you are looking for?

 ![Screenshot 2024-03-25 at 06.50.17](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/d/5d67ffee6ff0649710bdd7413709060049534df3.png)

```auto
.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;border-radius: 0px;
}
.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
border-radius: 12px 12px 0 0;
}
.items .image-style-rectilinear, .items .aspect-container img {
border-radius: 12px 12px 0 0;
}

```

---

<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:** [March 24, 2024, 11:58pm UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/6 "2024-03-24T23:58:48Z")

</div>

Looks like it does the trick. Can we make that image a bit bigger?

---

<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:** [March 25, 2024, 12:02am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/7 "2024-03-25T00:02:00Z")

</div>

The image here follows the aspect ratio of the source. If the image is a portrait it will be taller. Do you mean fixed size?

> [@ThinhDinh](#):
>
> Can we make that image a bit bigger?

---

<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:** [March 25, 2024, 12:03am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/8 "2024-03-25T00:03:56Z")

</div>

Yeah, I just thought it’s a bit far from “CSS Stylist” for my liking.

---

<div class="post-metadata">

**Author:** ![Kiwi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kiwi/32/60332_2.png) [@Kiwi](https://community.glideapps.com/u/Kiwi)\
**Post date:** [March 25, 2024, 12:10am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/9 "2024-03-25T00:10:20Z")

</div>

Amazing thank you! Looks fabulous

---

<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:** [March 25, 2024, 12:10am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/10 "2024-03-25T00:10:35Z")

</div>

![Screenshot 2024-03-25 at 07.09.44](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/8865478f9e63fa83ffbb181c53e42f28463dda7d.png)

```auto
.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;border-radius: 0px;
}
.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
border-radius: 12px 12px 0 0;
}
.items .aspect-container img {
border-radius: 12px 12px 0 0;
height: 250px;
}

```

---

<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 1, 2024, 12:10am UTC](https://community.glideapps.com/t/custom-collection-design-image-css/71635/11 "2024-04-01T00:10:41Z")

</div>

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