Remove spacing between words in bullet list in OneTone Pro theme

with css:

the div containing the list was set to text-align: justify;
justified text will space out the words so they line up evenly on both sides.

add this css to the stylesheet

.about-text {
color: #2d1f16;
font-size: 25px;
text-align: left;
}

The issue seems to be that you have text justification on for that section, and the small text areas and the large font size combined with text justification causes some oddities. There are a few ways to solve this. You could turn off justification:

.service-box .about-text {
  text-align: initial;
}

Or you could reduce the font size:

.service-box .about-text {
  font-size: 15px;
}

Or you could hyphenate words:

.service-box .about-text {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

Whichever option you select, you should add the code to a custom CSS plugin or your theme’s built-in custom CSS option.

Thanks so much for your help. Jaycbrf, the following code is already in my style.css. Do I need to comment it out and add one of the code blocks Stephen mentioned?

.about-text {
color: #2d1f16;
font-size: 5px;
text-align: left;
}
I see an extra stylesheet named editor-style.css. Is this a custom CSS option and where I should add different code? Or do I need to add a custom CSS plugin? The other .css files I see for OneTone Pro are media.css and RTL.css.

It’s not recommended to edit the theme’s stylesheet directly, as you’ll lose those changes if the theme is ever updated in the future, to fix bugs or security issues or to add new features. Instead, you should use a custom CSS plugin or your theme’s built-in custom CSS option, if one exists.

Thanks so much, Stephen. Any of the three options make the lists look better than they originally did. However, the font color changed to a light gray color. Can I control the font in the style.css or in the Custom CSS editor?

Are you referring to the same text we’ve been discussing? I just checked your site and the text in the “About” area (“Multiple century-old studies in Europe have demonstrated that salt therapy sessions help treat the following:”, etc.) is black. Are you referring to the headers in that area (“How It Works”, “What Salt Therapy Helps With”)?

This is interesting. At home last night on a Windows 10 laptop, I saw small, light gray text in the About area. Now at work on a Windows 7 PC, I see black text and your code suggestions fixed the spacing problem. I’ll have to go home tonight and look at the site on Windows 10 again. It’s so strange.

Your fixes also solved the problem with spacing in bulleted lists when I view the site on my Android. However, when I view the site on an iPad, no text shows when I click About headings such as “Introduction to Halotherapy,” “How it Works”, etc. That’s a whole different can of worms.

I really appreciate your help. This solves one problem my business owner and friend asked me to review. There are a few other things about this site I need to fix. I’ll try myself and post separate threads because the issues are different. Thanks, again!

I’m going to try to view this site in a different browser on Windows 10 other than Edge. Maybe that’s why I see the strange small, light font.

I have to tell you all, I’m not a fan of Windows 10, but I digress… Maybe I just need to get used to it. It isn’t making it easy for me to get up-to-speed with WordPress. I’ll get there some day, but I should have bought a new laptop with an older OS.