Divi: CSS snippets to fix heading size on mobile (h1, h2, h3, h4)

Divi: CSS snippets to fix heading size on mobile (h1, h2, h3, h4)

Have you ever tried to fix the size of the titles in your Divi theme, but they got really big when accessed by the cell phone?

In this post we will teach you how to set a specific size for your titles, but that these changes only appear on mobile. So we can set a title size for the computer and a different size for when the site is accessed by mobile devices.

All changes are made using CSS. You can add these lines of code inside the menu “Appearance ➡ Customize ➡ Additional CSS”.

The snippet below will set the size of the titles for all screens, you can edit it to set the font size you want:


h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

Don’t forget that you can also set the font sizes using the Divi Customizer (under the typography menu).

How to add CSS for titles (CSS for H2, H3, H4, H5 & H6) only on mobile devices?

But what if you just want to resize titles on mobile devices? This magic is made using CSS media-queries. Media queries can define a screen size, and the settings contained there in will be applied only to that specific size.

See below how our snippet would look using a media-query:

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

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

}

This way the changes will be applied only to devices with up to 720px in width, ie: mobile devices 🙂

You can also use in instead of pixels to ensure a more accurate size on mobile devices. See how in this Elegant Marketplace article.

Leave a Reply

Your email address will not be published. Required fields are marked *