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

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

Home Forums Support Html block span class defined in Additional CSS not taking effect

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2193404
    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.

    #2193423
    David
    Staff
    Customer Support

    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 ?

    #2193708
    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. ๐Ÿ™‚

    #2193712
    David
    Staff
    Customer Support

    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 ๐Ÿ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.