How to adjust size of h1, h2, h3 in pro theme

Support
#1

Hi, I am wondering how to adjust the size of h1, h2, h3 in pro theme.

Thanks

Like to reduce the font size for the Headings
#2

Hi,

To adjust the size, you can add this in X > Launch > Options > CSS

h1,.h1 {
    font-size: 400%;
}

h2,.h2 {
    font-size: 285.7%;
}

h3,.h3 {
    font-size: 228.5%;
}


h4,.h4 {
    font-size: 171.4%
}

h5,.h5 {
    font-size: 150%
}

h6,.h6 {
    font-size: 100%;
}

Change the font size as you like.

Hope that helps

2 Likes
#3

hi paul,
and where is the right place in pro to add site wide custom css? i find at least 2 places.
i put it in global css and it is being ignored.
adding an !important helps, though. but this can’t be right?
thanks! kai
ps: also i am curious why this is not a part of the theme settings. it must be an often used feature - no? is it bad typography or coding?

1 Like
#4

Hi Kai,

You can add the following code to X > Theme Options > CSS

I have built dozens of website with X and I rarely change the general size of the headlines, it is not bad typography or coding at all.

The cool thing about Custom Headlines is that they allow you to use an h5 with class of h1, what makes your h5 looks very big like an h1 but it does not have a SEO structural importance as a real h1…and so on

Hope it helps

#5

thanks a lot joao!
but i pro there is no “x”. could you please let me know where to add that code in PRO?
custom headlines are nice but they have to be adjusted on every single page if i want to change something site wide…
the css does not apply unless i add an !important. is that ok?
thanks a lot! kai

1 Like
#6

That would be fine :slight_smile:

Regards!

1 Like
#7

thanks @thai - could you please let me know the correct place in PRO! to place the css? thanks! kai

#8

Hi Kai,

If the CSS is specific to a page, you can add on Cornerstone > CSS

Otherwise you can add on : Pro > Theme Options > CSS

Or to the style.css of your PRO Child Theme.

Hope it helps

1 Like
#9

Hi there,

The design in dashboard is probably not from the theme. The best placement is style.css but you should add !important;, it’s because CSS has different loading order depending on where you place it. Adding !important when using style.css whille make sure that it will override other existing CSS no matter where it’s added.

Would you mind providing the site’s URL that has this issue? Maybe I could find something why it’s not taking effect.

Thanks!

1 Like
#10

Hi Paul,

I added that to global CSS in my Pro Theme, but when I make size adjustments with it, it doesn’t reflect on my site.

Thanks

#11

Hi there,

The design in dashboard is probably not from the theme. The best placement is style.css but you should add !important;, it’s because CSS has different loading order depending on where you place it. Adding !important when using style.css whille make sure that it will override other existing CSS no matter where it’s added.

Would you mind providing the site’s URL that has this issue? Maybe I could find something why it’s not taking effect.

Thanks!

#12

@Rad and which css option/placement in x/pro is the last one in the css hierarchy?

#13

What do you mean by last one? The last to be loaded is the page’s CSS. The means the page’s CSS would override all CSS. You might have syntax errors in your CSS that is why it doesn’t work. You can paste your CSS in http://csslint.net/ and it will scan it for errors.

Thanks.

#14

@christian_y yes i meant the last css being loaded. so the pages css ist loaded last? even after the custom.css file in the child theme?
the css came from theme.co for h1, h2, etc. sizes. see further up this thread…
nice site you suggested :slight_smile: thanks!

#15

Hello @iTurtle,

Thanks for writing in! Any custom CSS you have in the builder’s CSS editor for that page should take precedence over an element as long as the selector specificity is correct, as it is output directly on the page. Since the child theme’s custom CSS styles are loaded from an external stylesheet, the in-page CSS should take over even with the same selectors.

Cheers!

#16

hello @kory, thanks for your explanation! does that also mean that the css of an element on a page overrides everything else?
if so: a h2 element on the page would override my h2 size in the global css (builder oder file in child theme). that would be unfortunate since i would have to use an !important or it would not work globally.
i really really wished that there where proper global font settings. all these css settings for just one element are in most cases useless to me. please make some global elements or something. thanks a lot! kai

1 Like
#17

Hi there,

If you are using the V2 headline element, the CSS code suggested in this topic will mostly not work because the structure of the element will be different and it has a lot of built in option that will control the style of the headline element which will be given the higher precedence over the custom CSS not unless !important is add in the code.

However, if you will use the Classic Custom Headline element, the code should work fine and you could increase the selector specificity so that the CSS code will be given the high priority over the predefined CSS.

You can do this by updating the CSS code to:

h1 span,
.h1 span {
    font-size: 400%;
}

h2 span,
.h2 span {
    font-size: 285.7%;
}

h3 span,
.h3 span {
    font-size: 228.5%;
}


h4 span,
.h4 span {
    font-size: 171.4%
}

h5 span,
.h5 span {
    font-size: 150%
}

h6 span, 
.h6 span {
    font-size: 100%;
}

This code should have the higher precedence over the default CSS because it is more specific to the span tag that is in the heading element since the Classic Custom Headline element’s HTML look like this:

<h2 class="h-custom-headline h3">
    <span>Custom Headline</span>
</h2>
1 Like
#18

@Jade thanks for your reply and css code!
i really would be interested in theme.co’s philosophy behind all this. why is there no working! global setting for body fonts and headline fonts? do you expect we set the styling in each element on each page separately? what would be the point of that? of course it would be good to be able to override the global stylings in a single element. but why not have a global setting first? that makes the v2 elements unusable for me.

2 Likes
#19

Hi,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. Thanks!

1 Like
#20

@paul.r what are your referring to? could someone please explain the global font settings in x and pro???
ps: i had another idea for improvement. why not make font size and color part of the font templates? this would solve many of the mentioned problems. that would be indesign for the web :wink:

1 Like