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

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

Thanks as always!

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

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

Thanks Eric

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.

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

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

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

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:

Then what you need is:

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.

4 Likes

Excellent explanation - thank you!

1 Like

Feel free to ask more if you run into some problems with this, I’ll be willing to help.

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