Yellow points on Front page (class "span-dot" ) are not round but square.

Hello everyone,
It looks like idly front page changed the font and now yellow points (class “span-dot” ) are not round but square. Any idea how to fix it?

Hey there,
I hope you’re doing well today

You can accomplish this by simply wrapping the dots in the class “span-dot”.
Go to Appearance > Customization > Front Page Section > Jumbotron.
Edit the title and place the following. Be sure to use the text editor, and the dots in the span-dot class.

Clean<span class="span-dot">.</span>Slick<span class="span-dot">.</span>Pixel Perfect

Best Regards,
Support

Hello,
I hope you’re doing well today.
thank you for your a quick answer.

No it’s not going to work. Go here (this is original demo) https://colorlib.com/illdy/ Dots are wrapped but they are square I think because font was changed on Google Fonts. We have to do something with span-dot class itself.

Best Regards,
Dmitriy

Hello there,

You can use the following CSS code to change the font of the period by going to Appearance > Customize > Additional CSS and pasting it there.

/*Period font*/
#header .bottom-header span.span-dot {
    color: #ffde00;
    font-family: serif;
}

Best Regards,
Support

Thank you, Support. Your answer is perfect. It works beautifully :slight_smile:

/Period font/
#header .bottom-header span.span-dot {
color: #ffde00;
font-family: serif;
}

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support