Changing font types

[alonmg]

Hi,
When adding a text element I have the option to choose paragraph or multiple heading types. I want to have several paragraph options: a paragraph with small text, a paragraph with larger text, etc. Also, when choosing a heading it also adds a large padding on-top and under the text (attached a couple of examples).

1. How do I add more font sizer options that aren’t headings?
2. How can I control the padding above and under the different headings?

Thanks!

[lely]

Hello There,

1. By default, there’s only one settings for paragraph font size. To set different size, we can declare class. Try adding something like this on custom CSS:

   .p-small{
   font-size: 11px;
   }
   .p-medium{
   font-size: 13px;
   }
   .p-large{
   font-size: 15px;
   }
   To use that on your text, add the class to paragraph tag like this:
   <p class="p-small"> This is using small text for paragraph</p> <p class="p-medium"> This is using small text for paragraph</p> <p class="p-large"> This is using small text for paragraph</p>

2.) To control the padding on headings, try to add a class like pas on the element class field. For guidance on other helpful classes, please see this: https://theme.co/apex/forum/t/customizations-css-class-index/207

Hope this helps.

[alonmg]

Indeed! However I am inexperienced in css and need further help for item 2.
Where exactly do I put the css and what exactly should I write?
Could you outline what in the code I can play around with to control the spacing exactly?
Thanks!

[Joao]

Hi There,

If you click on any element, section, row or column on Cornerstone - On the Cornerstone left tab, at the bottom you have a box for classes, you can add your class there.

The code is referred to padding, you can play with padding as well by using the style box below the class box

https://www.w3schools.com/css/css_padding.asp

Hope it helps

[alonmg]

Hi,
Regarding issue 1 (changing font sizes for paragraphs), I added the custom css to appearance -> customize -> additional css as well as the apperance -> css editor.

However, when designating p class=“p-large” (took out < > so it would show in this message) to a text it didn’t change.

What am I doing wrong?

Regarding issue 2: I understand how to control the padding, however don’t understand where to do the changes. Just in the text “style” line?

Thanks

[paul.r]

Hi,

You only need to add p-large in the class field.

For headings, you can add the class pas in the class field.

Hope that helps.

[alonmg]

Hi,
I tried both and they don’t work. The font is still the same size after designating p-large, and the pas didn’t change the space as well.

Do you know why?

Thanks!

[ruenel]

Hello There,

It is not working because you added an invalid class:

The correct one should only be this:

And by way, please have the css updated and make use of this code instead:

  .p-small{
       font-size: 11px !important;
   }
   .p-medium{
       font-size: 13px !important;
   }
   .p-large{
       font-size: 30px !important;
   }

Please let us know how it goes.

[alonmg]

Thanks! I am sorted in-terms of the font size.
However, I still can’t get the heading to be without a large margin and padding above them. Attached an example. This is true through-out the website.

I tried pan, pas, man, mtn and nothing changed. How can I change that?
Thanks!

[lely]

Hi There,

It is working when I check. See what I add here: http://www.mobileod.s6.fcomet.com/wpmobile/an-x-test/
To clarify the issue, can you point us exactly on specific page and specific headline where you want to remove margin or padding?

[alonmg]

That helped, thanks! However, the colummn in which I place the custom headlines or text elements stlil have a large padding. Meaning - there is a big gap between the element itself and the border of the column.

For example, in this page: [http://www.mobileod.s6.fcomet.com/wpmobile/x/#/content/40] the first section has three rows.
In the first row there is only one custom headline which I want to have no margins or padding.
I tried putting in man and pan, however still the gap between the element itself and the border of the column is very large.
What am I missing? (http://www.mobileod.s6.fcomet.com/wpmobile/x/#/content/40)

Thanks!

[alonmg]

Also, I just noticed that in the footer builder I can control the font size, line height and letter spacing. This is exactly what I want to do for the different font classes in all of the website. Is there a simple way to do that?

[lely]

Hi There,

There’s an error on the class. When adding multiple classes, just separate it with just space. No need to add semicolon. See this: https://screencast-o-matic.com/watch/cbiY1kltl0.

That is not available yet on the content builder. To achieve that, we can add it on the style field of the element. For font size, we can add font-size: 10px;. Now to add line height we will use this: font-size: 10px; line-height:1;

Hope this helps.