• Your cart is empty.

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.

Blog Admin
EMP Author is our generic name for contributors on this blog that are no longer associated with the company but have added content in the past and the content is seen as valuable.

A little about the author, Blog Admin

EMP Author is our generic name for contributors on this blog that are no longer associated with the company but have added content in the past and the content is seen as valuable.

1 Comment

Submit a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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.

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, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team and a 15% discount code on all products you can add to your cart as a thankyou gift. 

Thanks, we appreciate your support

Pin It on Pinterest

Share This