Hey! I’m trying to bold my H3 and it’s not making it bold, instead is just spaces the letters a bit. It worked in the past, any ideas?
The font is Lato.
Hello Morr,
Thanks for writing in!
You have added this custom css:
h3 {
font-size: 23px;
margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Open Sans",sans-serif;
font-style: normal;
font-weight: 300;
}
If you want to make the <h3> tag being bold, please have your custom css code updated and use this:
h3 {
font-size: 23px;
margin-bottom: 20px;
font-style: bold;
}
We would love to know if this has worked for you. Thank you.
Do you know where I can check where I added that CSS? I can’t find the source of it.
And also, I don’t want all h3 to be bold, just the ones I make bold on the text edit.
Hey Morr,
It looks like the custom CSS is added in Pro > Theme Options > CSS section:
I checked your page and I see you’re creating posts in content builder so instead of using custom CSS I’d recommend you to use the Headline element, simply select the Type of the heading tag e.g h3
Amd under Text Format settings adjust the Font Weight of your headline:
Hope this helps!
That’s all the CSS I have in the theme options, none of it says my h3 should be a certain weight:
.x-sidebar .widget {
margin-top: 1em !important;
}
.single-sfwd-courses .learndash #learndash_lessons .learndash_topic_dots, .singular-sfwd-courses .learndash #learndash_lessons .learndash_topic_dots {
display:block!important;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
margin-bottom: 20px;
}
h3 {
font-size: 23px;
margin-bottom: 20px;
}
p {
letter-spac1ing: 0.3px
}
@media only screen and (min-width: 980px) {
.x-pricing-column {
width: 33.33%;
}
}
.edd-add-to-cart .edd-add-to-cart-label {
color: white;
font-size: 15px;
margin-top: 5px;
letter-spacing: 0.2px;
}
/*
COURSES
*/
.x-btn.my-btn-dashboard {
color: #e2591c;
border-color: #273661;
border-width: 1px;
background-color: #273661;
font-family: “lato”;
font-weight: 300;}
.x-btn.my-btn-dashboard:hover {
color: #202020;
border-color: #151f3b;
border-width: 1px;
background-color: #151f3b;
}
.single-sfwd-courses .entry-thumb {
display: none;
}
.single-sfwd-courses .entry-title {
display: none;
}
.single-sfwd-courses .x-main.left .ld-course-status {
display: none!important;
}
.single-sfwd-courses .x-navbar-wrap {
display: none!important;
visibility: hidden!important;
}
.single-sfwd-courses .entry-wrap {
padding-top: 0px !important;
box-shadow: none;
}
.single-sfwd-courses .entry-featured {
border: none;
}
/*
BLOG
*/
p.p-fmeta {
display: none !important;
}
.single-post .x-main.full {
width: 900px;
margin: 0 auto;
}
.single-post .entry-wrap {
box-shadow: none;
}
.blgog .entry-content.excerpt {
display: none;
}
.entry-title {
font-size: 40px;
}
.blog .entry-header {
font-size: 14px;
}
.archive .entry-header {
font-size: 14px;
}
.archilve .entry-content.excerpt {
display: none;
}
Hi Morr,
Did you try the Headline element to add the <h3> headings in the post? This method will also avoid the usage of custom CSS. However if you need to use the custom CSS to make some headings bold then you can add the following code in the Theme Options > CSS:
.bold-heading {
font-weight: bold;
}
And then assign this class to any of your heading to make it bold e.g:
<h3 class="bold-heading">Contents:</h3>
Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
- Intro to CSS - https://goo.gl/mFuWQT
- How to get CSS selectors - https://goo.gl/BmoH39
- Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
- CSS Media Queries - https://goo.gl/L3ZHNg
Hope this helps!
Why can’t I just bold the headline in the text editor? I know about all the css and headine elements, but I just wanna be able to bold my text as is without all of that…
Hi Morr,
I agree with you, I think this has something to do with caching, please clear all your caching plugins and minifier features, including your browser’s cache.
I see that you’re wrapping your h3 with <strong> tag, when I first check your site I saw this:
b, strong {
font-weight: 400;
}
That’s the culprit of the issue, I could not point where that coming though because of your minifier. That should not be, when I add a ?nocache parameter to the URL and refresh your page, it become
b, strong {
font-weight: 700;
}
That’s the correct one, and the <strong> is now properly bold.
Please clear all your caching plugin including your browser’s cache.
Thanks,
I cleared all cache, and even disabled the caching plugin. It’s still not bolded…
Hi Morr,
This is how it looks on my end now.
You can see that the h3 inside the strong tag is now bold. If you don’t see that on your end please clear your browser’s cache.
Or try accessing your site like this:
https://www.bloopanimation.com/animate-cc-vs-after-effects/?nocache=1
Thanks,
I do see it like that, that’s the problem, that’s not how a bolded Open Sans font looks like. It should be ,much bolder than that.
Hello Morr,
I have investigated the page why the Open Sans bold is not displaying properly and I found out that you have inserted incorrect html codes. You have several unclosed <p> tags and other invalid codes. For example, you have added this:
<p><div class="x-resp-embed"><iframe title="Animator vs. Animation IV (original)" width="771" height="434" src="https://www.youtube.com/embed/VufDd-QL1c0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<a name="learningcurve"><p><hr class="x-hr"></a>
<h2>Learning Curve</h2>
The correct code should be this:
<div class="x-resp-embed"><iframe title="Animator vs. Animation IV (original)" width="771" height="434" src="https://www.youtube.com/embed/VufDd-QL1c0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<hr id="learningcurve" class="x-hr">
<h2>Learning Curve</h2>
If we have access to the backend of the page and edit it to Cornerstone, we might find even more incorrect html codes. Please double check your html codes and after that, always to remember to clear your plugin caches before testing the site again.
Kindly let us know how it goes.
It doesn’t work. I tried to even create a new empty post and only add H3 and make it bold, and it does the same thing… That css is coming from somewhere else but I can’t find it!
Hello Morr,
Can you please go to Pro > Theme Options > Typography > Headings > Heading Font Weight. Make sure that it is set to “Bold”. Most of the time, this settings will override the font styles especially the heading tags added in the text element or in a page/post contents.
If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
We would love to know if this has worked for you. Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.