Unable to adjust Feature Box Headline Font Size

[bfaridnia]

I have added the following CSS to the customizer to target styling for the Feature Box Title found here:

Get in Touch - OC Tech Innovations

However no matter what I do I am unable to reduce this size. I confirmed CSS is loading properly as the Display: None tag works along with styling the x-feature-box-text. Its just the headline I can not change. I also tried adding custom CSS Class reduced-heading but that didnt work either. I am trying to set to 1.1em

Below is the custom CSS I added. Any guidance is appreciated.

.x-feature-box-title {
font-size: 1.10em;
}

.reduced-heading .x-feature-box-title {
font-size: 1.10em;
}

[lely]

Hi Behzad,

It is a selector priority issue. Please use more specific selector. You can use an ID instead. See this screencast showing how to check the style hierarchy: https://screencast-o-matic.com/watch/cYfo6kz65p

Hope this helps.

[bfaridnia]

Thanks! However your screen cast had no audio so was a little hard to follow.

I thought I specified the very specific selector h4.x-feature-box-title

I also thought I had assigned an ID to the element as well. “Reduced-Heading” and targeting that.

I may be rusty on my CSS. Can you explain which one I should have used instead? It seems the others are not as ‘deep’ down on the hierarchy.

[bfaridnia]

I updated by adding the ID of reduced-heading to the feature boxes. Changed the CSS to read:

#reduced-heading .x-feature-box-title {
font-size: 1.10em;
}

and that worked. Thanks

[christopher]

Glad that you managed to handle the problem.