[Support request] Html block span class defined in Additional CSS not taking effect

[Cleo]

I had the same question as Earl (#1031176) and answered by David (#1031202) – changing font attributes within a paragraph block. It was a solution I was using but not getting the results. I experimented a bit and noticed something really weird going on in the Additional CSS section with the span class.

Here’s an example: I want the credentials after the person’s name to a smaller font size. I’m using span class like this:

Here’s the contents of the HTML block:
<h1>Name of Person <span class="title-font-small">MS PT, PLLC</span></h1>

1) defining span in Additional CSS

span.title-font-small
{
	font-size:69%;
}

Nothing changes. The entire paragraph is in H1 no span class.
When I test the above code in VSCode, it is fine – the person’s name uses the h1 styling and the credentials are 69% smaller.

The way I could get the span class to show in my Additional CSS was to double up by defining the class first (as a blank), then again as a span.

2) adding empty css for .title-font-small above the span.title-font-small class is the only way the span class shows up:

.title-font-small 
{
}
span.title-font-small
{
	font-size:69%;
}

So I have a solution but it feels hackie and makes me wonder if I’m missing something obvious.

[David]

Hi there,

do you have any other CSS in the Customizer > Additional CSS?
If so what happens if you add your CSS at the very top of the additional CSS ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cleo]

Hi David,

Thanks so much for your quick reply.

I do have other css in Additional CSS. Moving the span.title-font-small to the top of the Additional CSS file was effective. I could remove the empty class.

I pasted the (original broken) Additional CSS code into VSCode and found there was an extra curly brace in the class above my original span class definition. (Hence, moving the class to the top as you suggested worked to fix it).

It looks like the real problem was an extra curly brace in the Additional CSS class preceding the span class. Unfortunately, the error was not obvious in syntax coloring (code validation). The extra curly brace did not show as an error (red markings) unless I directly selected it. I added a bunch of extra curly braces and they were red when typed but turned black. What would be great is more obvious code validation in the CSS editor – so this ticket has turned into a feature request for Additional CSS, I guess. 🙂

[David]

Glad to hear that helped resolve the issue.

The Additional CSS is part of WordPress and its syntax highlighter is not very good. Maybe they will improve it in the future 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts