Font size hell - different in Cornerstone and where has the customizer gone?

[lisacole1]

Home - Thinking Green Design

In the theme options under Typography I have stepped selected and everything is 14px
The content font size is 1rem.

I have this code in CSS
/* font size */
h1, .h1 {
font-size: 1.6rem !important;
margin: 1rem 0 1rem;
text-transform:none;
line-height: 1.2!important;
}
h2, .h2 {
font-size: 1.4rem;
margin: 1rem 0 1rem;
text-transform:none;
line-height: 1.2!important;
}
h3, .h3 {
font-size: 1.2rem;
margin: 1rem 0 1rem;
text-transform:none;
line-height: 1.2!important;
}

The settings for the fonts in the Cornerstone page are all Font Family Inherit and 1 em.

why are the fonts different sizes on the main page and the about page?
https://www.thinking-green.co.uk/
https://www.thinking-green.co.uk/about/

and…

I looked at your video about responsive fonts but it says to copy and paste something into the class section. I have Advanced mode turned on in the global preferences but I cannot see that area to customise.

I just want an easy life and some control over the font sizes!

[christian]

Hey Lisa,

In your About page, you’re using regular headlines like this: <h2>Text</h2>.

That and headlines inside Classic Elements would get the font size in your Custom CSS.

In your home page, you’re using V2 or non-classic elements and the v2 elements has their own Font Family option and according to what you said, the use 1em font size. Change the Font Size the same as your custom CSS like the following screenshot. So that you don’t set the font size each time you add a text or headline element, save the element as a preset so you’ll have a pre-configured element to use the next time.

Just a little background about the REM unit. It’s a multiple of the Root Font Size so if you have 14px Root Font Size for XL, your font size for desktop screen size would be 14px. 1.5 REM would be 21px.

Hope that helps.

[lisacole1]

Thank you, that makes sense but altering the rem makes no difference

my H1 is set in css to 1.4, H2 is 1.2.
On the about page it is still huge and no changes show on the front page.
I tried adding in a classic text box and I have the same problem there

[lisacole1]

it is something to do with spacing, should there be space between the number and rem? Sometimes if I take the space away, things change radically. https://snipboard.io/cIKRY5.jpg
But changing the value makes no difference. this one has 1.1 rem and it looks the same as the previous.
https://snipboard.io/nAC0WF.jpg

[christian]

Hey Lisa,

In your screenshot of the “Designer” text, you’re still using EM. Use REM.

Additionally, the exception to what I said earlier is your CSS would work for HTML headlines inside a v2 Text element. I see now that you have an <h1> inside a v2 Text element and your custom CSS is

h1, .h1  {
font-size: 20px !important;
}

That would work.

If you want us to create an example, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin username and password

Thanks.

[lisacole1]

Thank you, I have take all the css for font sizes out now and it is working a bit better.
I’d like to be able to make the headings smaller and the body font bigger overall. I’m now so confused I don’t know what to do.
Are there any guidelines about stepped and scaling settings? I don’t feel like I have any control over the font sizes at all now.

[lisacole1]

I don’t understand why changes I make here on the theme options show on a cornerstone page. I can change the rem or em or whatever in the css and see changes in real time.

but nothing changes any of the font sizes on a page made with the wordpress editor

[lisacole1]

I can see that something is making that H2 huge in the inspector but I can’t find out where to change that. Can you help please.

[lisacole1]

To clarify my question - How can I make my H1, H2 and H3 smaller on normal WordPress pages.
Nothing I do in Theme Options CSS changes them, it only changes Cornerstone pages.
thank you!

[tristup]

Hi Lisa,

It seems that custom CSS code added into the Page CSS is overriding your settings and the other values set in the Theme Options > CSS. Please remember that the Page CSS is having greater priority than the Settings and Theme Options > CSS.

It has been also found that you are using the X (version 8.3.0) theme and Cornerstone(version 5.3.2) is different version, I would request you to update the X theme by following the below steps.

1. Delete the Cornerstone existing one
2. Update the X theme to the 8.3.2(which has been released a few hours ago) version on automatic updates
3. After deletion of the Cornerstone, please use the link in the dashboard to automatically install the Cornerstone.

Hope it helps.
Thanks

[lisacole1]

I’ve updated everything, thank you.
I want control over the main heading sizes and nothing I do globally makes a difference.
How can I delete the custom page css on a page that is not Cornerstone? I see this in the WordPress editor.

[lisacole1]

Got it! It was a page left over from the imported content that I was working on, that had page css! What a stupid thing I did trying to cut corners.
Thank you so much for your help, sorry it was so painful.

[tristup]

Hi Lisa,

Glad that we are able to help you.

Thanks