# CSS in Custom Collection **URL:** \ **Category:** Ask for Help\ **Created:** [June 14, 2025, 4:34pm UTC](https://community.glideapps.com/t/css-in-custom-collection/82483 "2025-06-14T16:34:43Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![BLA\_68](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@BLA\_68](https://community.glideapps.com/u/BLA_68)\ **Post date:** [June 14, 2025, 4:34pm UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/1 "2025-06-14T16:34:43Z")
I’m really challenged by CSS but hoping someone can help me do something fairly simple to change the styling on a custom collection. When you use the card background there is a lot of space between the elements and on the top and bottom. ![Screenshot 2025-06-14 at 9.25.48 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/79a0afe5cafe1e3e5baef7c6f95bf245063baad7.png) So for example I would like “Blocks” to sit closer to “Opus” and also reduce the space above Opus and below “Blocks” Alternately, if the background is NOT a card, the look is very confusing since everything runs together and there is no mouseover highlight that tells the user they can select something. How would I had a bottom border to the non-card layout and have it highlight upon hover ![Screenshot 2025-06-14 at 9.21.08 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/5/45b447092552de9c87f1da7c8690ec949f137c01.png) (as it does with a List Component) ![Screenshot 2025-06-14 at 9.22.16 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3624cff0f2f7672bd0bf629fa2ad668cb23b2fc.png) Thank you in advance for any advice on this! ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [June 14, 2025, 4:50pm UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/2 "2025-06-14T16:50:43Z")
This may give you a couple ideas > **[CSS Library by LowCode Agency](https://css-library.glide.page)** ---
**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:** [June 15, 2025, 2:24am UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/3 "2025-06-15T02:24:22Z")
Does it have to be a custom collection, or can a list collection with a card setup be enough to work with (further CSS can be applied). ---
**Author:** ![BLA\_68](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@BLA\_68](https://community.glideapps.com/u/BLA_68)\ **Post date:** [June 15, 2025, 2:44am UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/4 "2025-06-15T02:44:06Z")
@Eric_Penn Thanks. Great resource I had forgotten about. @ThinhDinh, it does need to be a custom collection because I have some custom butttons that I created with the AI component that I want to deploy. ---
**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:** [June 15, 2025, 2:45am UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/5 "2025-06-15T02:45:12Z")
Good to know. Browse through the CSS Library and find something to play with I guess. If it doesn’t work, please let us know here. ---
**Author:** ![BLA\_68](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@BLA\_68](https://community.glideapps.com/u/BLA_68)\ **Post date:** [June 15, 2025, 3:09am UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/6 "2025-06-15T03:09:39Z")
Ok, so experimenting a bit with it and relying on one entry from @ThinhDinh (and some input from ChatGPT) I was able to achieve most of what I want for the non-card layout. I think my css is probably bloated. Any advice on cleaning it up would be great. ```auto .test div[class*="pages-component-renderer___StyledDiv5"] { padding: 8px 0; border-bottom: 1px solid #d1d1d1; transition: background-color 0.2s ease; } .test div[class*="pages-component-renderer___StyledDiv5"]:hover { background-color: #f6f6f6; cursor: pointer; } .test div[class*="pages-component-renderer___StyledDiv5"] p, .test div[class*="pages-component-renderer___StyledDiv5"] h6 { margin: 0; padding: 0; } .test div[class*="pages-component-renderer___StyledDiv5"] p { margin: 4px 0; } .test div[class*="pages-component-renderer___StyledDiv5"] h6 { margin: 6px 0; } .test div[class*="pages-component-renderer___StyledDiv5"] > div > div > div:nth-child(1), .test div[class*="pages-component-renderer___StyledDiv5"] > div > div > div:nth-child(2) { margin: 0 !important; } #must-start-with-a-letter6b845812313c3b03c315de9f149441ba > .select-mode-container___StyledDiv2-sc-1q98tyi-1 { margin: 0 !important; padding: 0 !important; } #must-start-with-a-letter6b845812313c3b03c315de9f149441ba p { margin: 0 !important; padding: 0 !important; } ``` Also, there is one weird thing happening at the top which is that in adjusting the margins, the component sneaks up into the search field. I assume I need to have a different margin that applies to the very first item but not sure how to do that. ---
**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:** [June 15, 2025, 3:39am UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/7 "2025-06-15T03:39:00Z")
#must-start-with-a-letter6b845812313c3b03c315de9f149441ba > 6b845812313c3b03c315de9f149441ba There are some parts where you don’t want this, it might be different for different devices/OS. ---
**Author:** ![BLA\_68](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@BLA\_68](https://community.glideapps.com/u/BLA_68)\ **Post date:** [June 16, 2025, 4:19pm UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/8 "2025-06-16T16:19:14Z")
Sorry to be dense but is the solution to delete “6b845812313c3b03c315de9f149441ba”? ---
**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:** [June 16, 2025, 11:37pm UTC](https://community.glideapps.com/t/css-in-custom-collection/82483/9 "2025-06-16T23:37:00Z")
I recall #must-start-with-a-letter usually means you can assign a custom CSS class to the component. You can try checking what component it is, assign it a custom CSS class, and use this instead to see if it helps. ```auto .custom-class-name > div[class*="select-mode-container___StyledDiv2"] { margin: 0 !important; padding: 0 !important; } ```