Change Collection Description font size in hero banner in DAWN theme

Shopify Discussion
1

I’m trying to change the small-ish font size of the collection description text that appears when you add the Collection Banner section. When inspecting the code, it appears that there’s a hard coded font size of 13px for every sentence as a span element.

I’ve tried modifying values in collection-component-hero.css to no avail and looked in theme liquid and main-collection-banner liquid files but nothing pops out. Where can I edit this value?

2

If you can’t find a built-in solution and need to use custom CSS code, I wrote a little snippet you can use. Just copy-paste it to your base.css and adjust the 30px to be whatever you like.

/*Increase Dawn Hero banner description font-size*/
.banner .banner__text.body {
font-size: 30px !important;
}

Video demo

Hope this helps!

3

Hmm that didn’t work. Those classes are not called upon in the code.

4

I’m not trying to do anything with images. This is about text.

5

Oh sorry wrong one! I just looked at the “Hero Banner in dawn” and overlooked something..

This CSS should work. In Dawn theme, inside a collection page, The Collection Banner, the description (that is added in the Shopify backend, for the collection.)

.collection-hero__description {
    font-size: 50px !important;
}

Again, to base.css.

If you need a responsive layout, meaning a different smaller font-size for small screens (mobile devices etc) you can use this second code below. Adjust the 600px “breakpoint” to your liking, under that a different font-size is applied.

.collection-hero__description {
    font-size: 50px !important;
}

@media (max-width:600px){
    .collection-hero__description {
        font-size: 25px !important;
    }
}

For me there are no elements, but that shouldn’t matter.

Did that work?