How To Set The Responsive Styles For Headings premium free

To set the responsive styles for headings, navigate to Theme Options > Fonts >Headings Responsive and input your desired values in the available fields:



In case these options aren’t available (which is the case in some of our older themes), you can use the following CSS to achieve the same result:

 @media only screen and (max-width: 768px) {
      h1 {
          font-size: 15px;
  line-height: 15px;
  letter-spacing: 1px;
      }
      h2 {
          font-size: 15px;
  line-height: 15px;
  letter-spacing: 1px;
      }
      h3 {
          font-size: 15px;
  line-height: 15px;
  letter-spacing: 1px;
      }
      h4 {
          font-size: 15px;
  line-height: 15px;
  letter-spacing: 1px;
      }
      h5 {
          font-size: 15px;
  line-height: 15px;
  letter-spacing: 1px;
      }
      h6 {
          font-size: 15px;
          line-height: 15px;
          letter-spacing: 1px;
      }
}

You should paste this code to Theme Options > General > Custom CSS or Appearance > Customize > Additional CSS.

The code affects font size, line height and letter spacing for all six headings for devices wide less than 768px. If you want to change certain headings only, you should remove the ones you don’t want from the code snippet.

For example, in case you don’t want to change the h6, you would remove the following:

h6 {
   font-size: 15px;
   line-height: 15px;
   letter-spacing: 1px;
}

Adjust the values of the three properties according to your needs, and remove the ones that you don’t need.

To make a set of rules for mobile devices as well, copy and paste this code once more and replace the value of max-width in the first line with 480px, so the first line will look like this:

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

Then, as with the first snippet, adjust the rest of the code to your specific needs.