Customising H1 etc tags

Support
#1

Hi

I’m trying to streamline my website and there has been multiple times where I’ve added custom code to the CSS via theme x > options > custom CSS.

But I’m not sure its as neat as it should be. For example I have

.service h3 {
margin: 0;
font-size: 36px;
line-height: 1;
color: #e17d4a;
}
.service h3 strong {
display: block;
margin-top: 2px;
font-size: 0.75em;
}

The I also have the size controlled in appearance > customise > Additional CSS

h3 {
font-size: 21px;
}

three different entries for the same tag or ‘strong’ variant of it.

My questions are:

  1. What is ‘.service’ for? is it necessary?
  2. Where is the correct place to adjust the header font size? All the other font sizes are controlled via theme x > options > typography. Is there a similar place to control headers?
  3. If I should control the header tags via CSS will the following work (if put in the custom CSS in them options):

h3 {
margin: 0;
font-size: 1.5em;
line-height: 1;
}

Thanks in advance!

Elizabeth

#2

To clarify

I want responsive headings, and I cant seem to do that if I use the css code above.

website is www.vancouverwithlove.com

#3

Hi @vancouverwithlove,

What is ‘.service’ for? is it necessary?

Depending on the slug of a page, our theme adds and additional HTML Class to the BODY tag of a page which will be unique for that page. You can also do the same thing by adding a unique HTML Class to the page using Page Settings.
The .service most probably shows that the font-size CSS is intended for the h3 tags that are presented under the Sevice page or a section or element that has the service class.

Where is the correct place to adjust the header font size? All the other font sizes are controlled via theme x > options > typography. Is there a similar place to control headers?

The font size of the headings in the theme is controlled by setting the root text size in X > Theme Options > Typography and each heading type will have a fixed percentage depending on the root font size. But you do not have any option available for you to add a specific size for h3 for example.

It is recommended that you use X > Theme Options > CSS to add your CSS code and avoid using Appearance > Customize > Additional CSS.

If I should control the header tags via CSS will the following work (if put in the custom CSS in them options):

The selector of the CSS code should be this:

body h3, body .h3 {
  /* Add your CSS code here */
}

Please also be aware that we are talking about the heading code that is generated automatically by the theme. If you want to add heading yourself you can use the headline element in our Page Builder and you can set the tag and font-size there using the options available for that element.

Finally, I suggest that you read the thread below for the responsive text considerations:

Thank you.

#4

Hi Christopher

Thanks for your help here.

The font size of the headings in the theme is controlled by setting the root text size in X > Theme Options > Typography and each heading type will have a fixed percentage depending on the root font size. But you do not have any option available for you to add a specific size for h3 for example.

For this answer here, I do use this to control the root font size, but my problem is that the header is too big on smaller screens but is a good size on larger ones. I’ve found that the normal functionality for the H1 tag is that it is responsive (currently when I dont adjust the h1 size in CSS it looks like there is some responsive design happening as the headers look ~300% bigger on the laptop and ~200% bigger on the phone)
However when I adjust the size with the following CSS it is no longer responsive and is still to big on the phones:

body h1, body .h1 {
font-size: 1.80em !important
}

So to clarify, I want to root font to be the size it is but the header (h1) to be smaller for mobile. If I could remove the header that is automatically created when I make a post then this could also solve it as I could use the headline element.

If there are any responsive options could you let me know?

#5

Hello @vancouverwithlove,

Adding your custom CSS will change the font size of the h1 element all through out the screen sizes. If you want to change the font size at any given screen size, you will need to use @media CSS block. For example, if you want to change the font size in smaller screen only, then you will need this:

@media(max-width: 767px){
  body h1, body .h1 {
    font-size: 1.80em !important
  }
}

To learn more about the @media CSS block, kindly check this out:

#6

Hi Ruenel, this is perfect, I will try this out and let you know how I do!

#7

We would love to know if this has worked for you. Thank you.

#8

Hi Ruenel

Could you check the website please but it looks like it is working now!

Also, I had another question, how would I adjust the margins for the header on the posts?

On a large screen having a margin is fine, but on the smaller screens it forces the title onto multiple lines due to large margins

#9

Hi @vancouverwithlove,

You can use CSS media query for that as well.

Media Queries for Standard Devices

But on the CSS selector instead of the body h1, you use .single-post h1, so it will only affect your single posts h1 headlines.

e.g.

@media(max-width: 767px){
  .single-post h1, .single-post .h1 {
    margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
  }
}

Cheers!

#10

Hi Friech

It looks like something else might be affecting the margins as when I do this as mentioned above the header is no longer centred. Is there something else that needs changing?
as a note i switched it to ‘auto’ to fix for now.

#11

Hello @vancouverwithlove,

I have checked your site and it appears that you have updated the code and use this:

.single-post h1, .single-post .h1 {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

If you set the left margin to 0, it will automatically be left align. And yes, the auto value will make sure that the header title will always stay at the center of the page.

Hope this helps.

#12

How do I have zero margin and still be centered?
is there some other code that is causing the header to not be centered?

#13

Hey @vancouverwithlove,

If you want to have 0 margins while it is also displayed at the center, you can use the text-align property.

.single-post h1, .single-post .h1 {
  margin: 0;
  text-align: center;
}

Hope this helps.

#14

Hi Ruenel

Unfortunately this does not work even with the important tag.

I cant leave it like this but the code i used is below: -

.single-post h1, .single-post .h1 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center !important;
}

is there some other code that is affecting this?

#15

Hi @vancouverwithlove,

You could try this CSS code to center the h1 heading text.

.single-post h1, .single-post .h1 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
}

Hope it will help your issue.

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

#16

Great, this looks like it works! Thank you

#17

You’re welcome!
It’s good to know that it has worked for you.

#18

Hi Ruenel,

One more question - although this has worked really well for page and blog post titles, I’m still finding that both the titles of my Search Results, and the names of people leaving comments on my blog posts are huge. Any advice on how I can change these? Thank you!

#19

Hi Elizabeth,

Normally, my advice on this would be to configure properly the Root Font Size under Theme Options > Typography, so you will have a responsive text throughout your site.

But since you can not re-configure this now as this will affect all the text on your site, you can add the custom CSS below to Theme Options > CSS area. But please keep in mind that we can not continue giving this type of customization as this might cause an issue/conflict on the future and we won’t be able to provide support for it.

/*search result title*/
.search-results .entry-title {
	font-size: 150%;
}

/*comments section text*/
#reply-title, .comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-rating label, .comment-form-comment label {
		font-size: 150%;
}

Feel free to adjust the 150% value, you can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial.

And use either %, em, or rem unit to your font-size so it will be responsive.

Cheers!

#20

Thank you for the respond, I will try this.

Just to confirm the only reason we went into the custom CSS is because the relationship between the ‘Root Font Size’ and the the header tags was not adjustable. IE I set the font via Theme Options > Typography to the size I wanted but then the titles were too big.

If there is a better way to adjust this I would happily implement!