CSS for H2, H3, H4, H5 & H6 for the Divi Theme on Mobile

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.

A little about the author, Eileen Lonergan

Eileen Lonergan is a WordPress website designer and internet marketing specialist. She is the founder and Community Manager of the Divi Theme User Group on Facebook. Eileen's focus is on web design, content marketing and search engine optimization.

1 Comment

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items. Please be aware that you will need an amount of experience in WordPress to take advantage of our themes and plugins. Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads. We do not offer refunds under any circumstances. If you feel that there is an issue with a product please get in touch with the developer of the product through their contact details which can be found within the plugins Dashboard, themes and documents we sell on their behalf. Rudeness to our developers or support staff will not be tolerated and support may be refused. By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - we send out around two emails a week to keep you informed of product updates, WordPress News and Developer advice. You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email. (Amended. February 6th 2018)

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest