BB Theme and BB Themer - Customizing the Post Title Size and Spacing

BB Theme
, ,
1

Hi BB Community!

There is a site I am using the BB theme with Beaver Themer as well. My post titles (on mobile only) are atrocious. There is a ton of extra line spacing, much too big, my header cuts off some of the first line, etc. and I was wondering if that is something I can customize via CSS, using themer, or another method.

Here is a link to a post to see the issue: Small Business Cyber Security Check Recommendations - Intrust IT

In a perfect world, I would like the post titles on all displays to be a size 36px with 1.5 line spacing (without making all H1 text across the site turn to 36px and 1.5 line spacing).

I have tried everything at my disposal and know-how.

  • Feeding post title-specific CSS into additional CSS under Customizer (did nothing).
  • Modifying the H1 text size and line spacing under Typography in the Customizer (does work), however, the H1 is also used to display page titles/for SEO on all my other pages and needs to be of a large size.
  • I’ve also tried selecting the Custom H1 style feature in Customizer, which I had hoped would be a way to customize the post titles only, and that also impacts the H1 font size sitewide.

Redoing all of my headings to accommodate the H1 and how posts look on mobile would be a bear on a site this size, plus I am using all headings H1 to H6 on a regular basis throughout the design for other page and section headings, subheadings, emphasis, blockquotes, etc.

Any help, guidance, direction or a magical code to plug would be much appreciated. Things like this will continue to get in my future way of getting more people to use the BB theme and BB over other themes that come with a nicely styled blog.

2

You can try this CSS. It will target the single post’s H1 tag

.single-post .fl-post-title {
font-size: 36px;
line-height: 1.5;
}
1 Like
3

This worked like a charm!

I was missing the .fl Beaver Builder callout in my initial CSS and only calling the post title. I had to settle with less line height, as even at 1.5 it was rendering more a 3 on mobile. A 1 worked perfectly.

THANK YOU so much! I have saved this so I can go fix it on some other BB Theme sites I’ve made as well!

1 Like
4

If you use Themer, i suppose you created a Posts or custom posts template, it’s made for that.
And added a heading module in this template.
In this module settings, you can set the spaces, font size… for each breakpoint.