Solved SP Page Builder

Pagebuilder 3.8.9 Addons not displaying Center alignment

Asked by Sean Carney 3 years ago Last activity 3 years ago

We have some Headings rows in some Page Builder Pro pages that are not willing to display Center aligned text. We had center aligned text originally but tried to see how left alignment would work and then when we decided to switch back to Center alignment, the Rows won't switch back.

**URL:** https://test1.theraliv.org/lchaim
**Page: **L'Chaim
**Heading Rows:**
To Your Health
Recipes
Cooking (Video, Demonstrations)
Stop Smoking (Seminars)

**URL:** https://test1.theraliv.org/lchaim/cooking-videos-demonstrations
**Page: **Cooking (Videos, Demonstrations) 
**Heading Rows:**
Cooking Videos, Demonstrations: Welcome Explorers!
Cooking Videos, Demonstrations: Keep Reading!
Cooking Videos, Demonstrations: Enjoy the Archives!

I sure wish I knew why the text won't change back to Center alignment!

Please let me know if there is a conflict or something we are doing wrong.

Sean Carney

Accepted answer

Marked as the solution

Pavel

3 years ago · edited

So, it seems like a bug.

Not a bug. The template does not have to be used with SP Page Builder, so it has its own settings. Typography settings add the code directly to head that gives them the highest priority.

Therefore, if you use SP PB do not use these settings in the template in order not to lose control over them in SP PB.

If you need settings circled in green, use custom.css for them instead of the template settings.

Now i see that it comes from template's typography settings.

7 more replies

Mehtaz Afsana Borsha Staff

3 years ago

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

-Regards.

Pavel

3 years ago · edited

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.

Sean Carney Asked this

3 years ago

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! :-)

Sean Carney Asked this

3 years ago

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

Pavel

3 years ago · edited

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;
}

Sean Carney Asked this

3 years ago · edited

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.

Pavel

3 years ago · edited

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