Hello,
I just published a blog post that has H2 and H3 headings. My issue is the spacing between words in the headings. I am not able to change the spacing using Customizer> Typography options. I would want it to look just like the regular text on my Blog, just that size would be large as it’s a heading.
You can check out the blogpost if that helps-
Hello @Rumble32,
Thanks for asking. 
You can add following CSS under X > Launch > Options > CSS to adjust letter and word spacing:
.entry-content h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {word-spacing: 0px; letter-spacing: 1px;}
Let us know how it goes.
Thanks.
Hi Prasant,
The CSS unfortunately didnt work!
Nothing changed in the headings after I added the CSS.
Hi There,
Please navigate to Theme Options > Typography under the HEADINGS section, set the H1 - H6 LETTER SPACING to 0.
Then clear your caching plugins and browser’s cache after this changes.
If this did not work, please provide us URL with a login credentials in a secure note, so we can take a closer look. Your site might have a different issue that makes the Theme Options > Typography > Letter Spacing not to work.
Cheers!
I tried to change the spacing, but it does not work. After I changed the setting to 0, the ‘publish’ option didn’t even activate. So maybe the site is not taking in the changes …
how can I send the login credentials securely in this chat?
HI there,
You may send the login details in a Secure Note which is the key icon under your reply.
Thank you.
Hi again,
Thanks for providing the credentials. I went to Theme Options > Typography and changed the letter spacing to 0.5em of your H2 and it worked just fine (see screenshot)
Since your site is on heavy cache which is preventing the changes to reflect on the front-end. Please purge the entire cache first of all cache plugins you’re using then disable all optimization services while you’re developing your site and then test the Theme Options > Typography options.
I’ve reverted the changes since your site is live.
Let us know how this goes!
Hi Nabeel,
Thanks for checking it out.
Could you pls guide me on how to purge the plug-ins cache?
By ‘disable all optimization services’ do you mean disable all plug-ins before I use customizer to make any changes on the front end?
Hi There,
If you’re using the W3 Total Cache or WP Super Cache plugin, you can take a look at this: http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/.
Regards!
I followed all the steps in the suggested article - cleared my browser cache, ran the W3 total Cache plugin to clear cache.
But the issue is still there … I am not sure if any additional steps are required?
Hi there,
Let’s disable your cache plugin first and don’t use it yet while we’re troubleshooting it. And based on response header, your page is served through Endurance cache too which means there are multiple caches that are being loaded. Clearing one will not clear another, and it will just regenerate new cache based on another’s cache, it’s a bit overkill.
So let’s disable the plugin first, and clear your Endurance cache too which I think part of your hosting environment. Then test it again.
Thanks!
I wasn’t sure what is Endurance Cache (sorry this is my first time making a website) so I googled it. Looks like it’s not a plug-in.
I found it under Settings> General> Endurance Cache.
Should I set the level to Off(Level 0)? Right Now it is set to Normal (Level2), and also deactivate W3 Total Cache before making any changes using customizer on the front end?
And after I have made the changes should I activate W3 Cache again and set the endurance cache again to Normal (Level2) or let it as is?
Hi again,
While you’re developing your site and making changes, it’s recommended to deactivate the cache plugin and turn off the Endurance Cache ( set the level to 0 ) so the changes reflect on the front-end as well.
Once you’re done with the development or changes, you can turn on the cache again.
Hope this helps!
Hi Nabeel,
I deactivated the plug-in W3 cache and set the endurance cache to level 0. I also cleared my browser Cache (I am using Chrome) but the changes still don’t reflect.
Hi There,
It’s a caching issue, I was able to change the letter-spacing of h1, see your titles here (https://charmofgifts.com/genius-ways-to-find-the-perfect-gift-everytime/) they are much closer now.
Browsers also have a cache, so make sure you clear your browser’s cache before previewing the page. Or use your browser’s incognito/private mode so it does not store a cache.
Clear your web browser’s cache, cookies, and history
Remember to clear all caches (plugin, server-side, CDN, and browser’s cache) after updating/editing so that the site serves you the updated data/styling/script. This will help you to avoid any potential errors.
How to clear W3 Total Cache’s Cache
How To Clear And Turn Off Server Cache On Bluehost
Thanks,
Hi, I tried clearing cache as recommended. Bluehost no longer allows users to delete cache themselves, but they can delete cache if the user requests them to.
So I asked Bluehost, and they confirmed clearing my cache.
Next I cleared the browser cache
After that I disabled the W3 cache and set the endurance cache to Level 0.
Even after doing all this the customzer just doesnt let me change the spacing in the headings.
Is there any other solution? like a css?
Hi again,
For a CSS solution, you can make use of the following code:
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
letter-spacing: 5px !important;
}
Adjust the letter spacing as per your need. Let us know how this goes!
1 Like
This worked!
Is there also a way to reduce to spacing between paragraphs?
Hey there,
Glad it worked, for the paragraph spacing, make use of the following code:
p {
margin-bottom: 10px !important;
}
Cheers!
it worked,thank you