CSS to change Title font size in a collection

[MJolley]

I have a custom collection that displays a list of items from a sheet as a schedule of events. Each item in the collection is displayed as a separate part (shown in picture). How can I write CSS to change the font size of the Title item only?

[Robert_Petitto]

It depends. Assuming you’re using a list collection within the custom collection —

1. Add a css class to the collection within the custom collection (something like custom-title)
2. In Settings → Appearance, target the collection’s title using this CSS:

.custom-title [class*="StyledP2"] {
font-size: 30px;
}

[MJolley]

Here’s the setup of the custom collection:

And here’s how the items appear:

I want the text “Remove materials from storage…” to be a different size (smaller, in this case). The code you wrote isn’t doing that, no matter which object I apply the CSS code to.

Also, more broadly, how do you know what code to write and what to target? Is there a resource somewhere that shows which objects/styles exist in Glide? For example, the “StyledP2” class, where did you figure out to target that?

[ThinhDinh]

@MJolley

Also, more broadly, how do you know what code to write and what to target? Is there a resource somewhere that shows which objects/styles exist in Glide? For example, the “StyledP2” class, where did you figure out to target that?

You can use the Inspect function in your browser to check that, but make sure you know what you’re doing because you can inadvertently affect some other components..

Here’s a sample to adjust the title font size, with the class name being smaller-title.

.smaller-title .headlineMedium {
font-size: 1.2rem;
}