pixel

A while ago I wrote a post CSS for Headline Posts at the end of the post I talk about using em’s so your headlines aren’t ginormous on phones, but recently people have been asking for the CSS for using h tags on mobile, so I t thought I would revisit the topic and give you a little more info.

You may adjust the size of your headers (h1 tags) in either the Divi Customizer (under Typography) or module by module.  To set the h2, h3, h4, h5 or h6 size, you will need to add this CSS into your child theme.  You may use this free child theme creator.  Unclear on child themes?  Read this post: What Happens if I Don’t Use a Child Theme?

To begin with, the CSS for font sizes of headlines, which will work best on larger screens:
h2 {
font-size: 16px;
}

h3 {
font-size: 14px;
}

If you want to adjust the sizes on mobile, use this:

@media screen and (max-width:480px) {

h1,h2,h3,h4,h5,h6 {

font-size: 14px;
}
}

In my example above that would make all h tags the same height, so you may want to do this:

@media screen and (max-width:480px) {

h1 {
font-size: 14px;
}

h2 {
font-size: 12px;
}
}

etc.

BUT, what I think may make your life easier is if you use em’s.  Okay, I hear you, how can that make your life easier if you don’t know what I am talking about.  Here goes.

  • em’s are a unit of measurement.  They are scalable based on the browser setting of the font size. If your browser’s default pixel size is set to 12px then 1em = 12 pixels.  So 2em = 24 px or .5 em = 6px.
  • In my opinion, and please feel free disagree and to have at it in the comments below, it makes the most sense to use em’s when you have a gigantic headline – say 96 pixels in your hero image.  On the phone that size would be ridiculous and by using an em you are scaling it to fit the mobile device.
  • Here is a great website that will help you convert the font sizes: https://websemantics.uk/articles/font-size-conversion/  It shows font size, em’s & %’s.

 

So your CSS would look like this:

h2 {
font-size: 2em;
}

h3 {
font-size: 1.5em;
}

I was asked for the CSS for font name, font weight and line height and I will add in color.

Color

color: green;

Or use the hex code #000, etc,

Underline text

text-decoration: underline;

Letter Spacing

letter-spacing: 3px;

Or use a negative in front of the number to decrease the width between letters (i.e. -3)

Line Height

line-height: 0.8; (small) or line-height: 1.8; (large)

text shadow

text-shadow: 3px 2px red;

font family: 

font-family: “Times New Roman”, Georgia, Serif;

font weight:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

p.thicker {
font-weight: 900;
}

If you would like to have your h2 tag be 24 pixels high, bold, New Times Roman and spaced out a little bit this is what you would use for your CSS:

h2 {
font-size: 2em;
font-weight: bold;
font-family: “Times New Roman”, Georgia, Serif;
letter-spacing: 3px;
}

Pain in the neck?  I KNOW!  The folks over at Elegant Themes have been saying for ages they are going to put all of this into the Theme Customizer.  I reckon at some point it will happen.
In the interim, hope this helps.  Happy designing.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This