Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

Hi Sean.

You have a code somewhere in "inline" (possibly in template's Custom CSS field) which affects this. I think you should know where this code is (somewhere when you set color).

Browser code inspector will always help to determine the problem - use it.

Interesting. It seems that the settings in Template Settings -> Typography -> Headings (h1-h6) are over writing the settings of the Page Builder.

I looked in my custom.css file of the templates css folder and there was no code there to do this. Then I looked in the Template Settings -> Custom Code -> Custom CSS and found it was not there either.

My solution was to set up h4 with center alignment and use that instead of h3. But, that does mean that no matter what alignment I select in the Page Builder, it will be overwritten by the Typography settings. So, it seems like a bug.

https://drive.google.com/open?id=1p8qFwluhjB9Pg-EhywNHfyDXNSJx5pUg&authuser=1&usp=drive_link

Are you sure that I have written some custom CSS somewhere that is making this happen. I could not find it.

I do not believe there is a way to NOT set an alignment option for each of the headings in typography settings. But, I have been wrong MANY times before! :-)

OK. I get it. This is not a bug but a feature. :-)

Thanks. It makes sense. Since there is no way in the Typography settings to not have something set for alignment, it sounds like the best way is for us to turn off the all of the settings for H3, H4, H5, H6 etc. and just set up everythings in the page builder. Anyhow, I will do some experimentation and do appreciate the explanation. And, we will figure out the best way for us to gain control of all of the elements.

Thanks again, Sean

My practice is this:

I set up a font family and color for body.

For headlines, I set up only font family and make all other settings in custom.css. This allows to configure the typography for the entire site and at the same time not lose control in SPPB in cases when necessary.

Here is my default custom.css that I use on starting in any new project

.h1, h1 {
    font-size: calc(1.375rem + 1vw);
}
.h2, h2 {
    font-size: calc(1.325rem + .4vw);
}
.h3, .h4, .h5, .h6, h3, h4, h5, h6 {
    font-size: calc(0.8rem + .5vw);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .h1, h1 {
        font-size: 3em;
    }
    .h2, h2 {
        font-size: 2.5em;
    }
    .h3, h3 {
        font-size: 1.286em;
    }
    .h4, h4 {
        font-size: 1.286em;
    }
    .h5, h5 {
        font-size: 1.286em;
    }
    .h6, h6 {
        font-size: 1.286em;
    }
}
.body-innerwrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#sp-main-body+* {
    margin-top: auto;
}

Wow. That is Very Cool.

Thank you very much for that.

So, you set the body font and color in Template Options -> Typography - Body?

Sean

I am going to try this now and see if I can figure it out.

So, you set the body font and color in Template Options -> Typography - Body?

As starting point - yes. But sometimes yes, sometimes no.

To comply with the laws of some countries (prohibition using Google Fonts connected via Google servers) and improve performance, in some projects I do everything completely through custom.css