# CSS code to shrink the size of the Title in a Collection

**URL:** <https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [November 10, 2023, 4:58pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676 "2023-11-10T16:58:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [November 10, 2023, 4:58pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/1 "2023-11-10T16:58:24Z")

</div>

Wow - the size of the Collection title is much larger in Apps than the Inline List in Classic.

How do I shrink this down a notch or two? I assume it has something to do with this ‘option’:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9b9988404365a314ecb00d2e43239b028185965c.png)

Thanks as always!

---

<div class="post-metadata">

**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:** [November 10, 2023, 5:04pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/2 "2023-11-10T17:04:55Z")

</div>

All the css goes under settings appearance… that’s so you designate the class name

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [November 10, 2023, 5:33pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/3 "2023-11-10T17:33:59Z")

</div>

Is there a knowledge base for Glide components and CSS - such as changing the font size of the Title in a Collection.

Thanks Eric

---

<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:** [November 10, 2023, 11:18pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/4 "2023-11-10T23:18:30Z")

</div>

Use the “Inspect” function in your browser, click on the element you want to adjust, find its stable class name and then start working on it.

You can also name the element, and that’s a good practice to manage CSS usage in your app.

In the end, it would be something like.

```auto
.custom-class-name div[class*="stable-part-of-the-class"] {
css goes here;
}

```

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [November 11, 2023, 2:15am UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/5 "2023-11-11T02:15:57Z")

</div>

In Glide Classic it seemed that experts had mapped out the Glide DOM/structure and provided simple CSS to change characteristics (making text bigger in an inline list) or extend functionality (like locking a rich text field to the top of the screen).

This is what I get when I inspect the Collection Title from the Glide builder (chrome) - not sure what to do with this…

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c1e38f94816ce1f02c79a4ced920a87007d265d2.png)

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [November 11, 2023, 2:33am UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/6 "2023-11-11T02:33:10Z")

</div>

Deleted all Titles and replaced with Templates/HTML in an RTF component to present smaller Titles.

---

<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:** [November 11, 2023, 7:26am UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/7 "2023-11-11T07:26:36Z")

</div>

> [@MattLB](#):
>
> In Glide Classic it seemed that experts had mapped out the Glide DOM/structure and provided simple CSS to change characteristics

We did that, but then CSS isn’t available for all tiers in the new apps anymore. They made it arguably much easier for anyone who wants to use CSS to do it though.

A list collection would have a structure like this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/445c1d9f19d6cd9eabcedc0037e77a06513dfba6.png)

Then what you need is:

```auto
p[class*="card-collection-list___StyledP2"] {
font-size: 20px;
}

```

If you need to apply to only one collection, name the CSS class for the collection and add it before the p class above.

If you’re not comfortable with using CSS, a custom collection with rich text is the way to go.

---

<div class="post-metadata">

**Author:** ![MattLB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mattlb/32/41284_2.png) [@MattLB](https://community.glideapps.com/u/MattLB)\
**Post date:** [November 11, 2023, 1:49pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/8 "2023-11-11T13:49:44Z")

</div>

Excellent explanation - thank you!

---

<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:** [November 11, 2023, 10:20pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/9 "2023-11-11T22:20:32Z")

</div>

Feel free to ask more if you run into some problems with this, I’ll be willing to 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:** [November 18, 2023, 10:20pm UTC](https://community.glideapps.com/t/css-code-to-shrink-the-size-of-the-title-in-a-collection/67676/10 "2023-11-18T22:20:46Z")

</div>

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