How to reduce line height of headings on mobile devices?

[stevetheadi]

Hi guys

The headings on this page are a mixture of H2 - H4. Mostly H3.

How to pass your driving test first time - Broughton School of Motoring

On desktop and tablet they display on one line, no problem.

But on a mobile device the headings split onto two lines and don’t display very well - there is a big gap between the lines. See, for example, the heading 'choose the right driving instructor here:

How can I make these headings look better on mobile devices?

Thanks!

[ruenel]

Hello @stevetheadi,

Thanks for posting in!

The line height were affected with your font-size: 14px; inline element css in the headings. You will need to edit each of your page/post and make sure that there is no <span style="font-size: 14pt;"></span> in each of your headings. Instead of having this at the moment:

<h3><span id="Choose_the_right_driving_instructor"><span style="font-family: tahoma, arial, helvetica, sans-serif; "><strong><span style="/* font-size: 14pt;">Choose the right driving instructor</span></strong></span></span></h3>

You must only have this heading code:

<h3><span id="Choose_the_right_driving_instructor"><span style="font-family: tahoma, arial, helvetica, sans-serif; "><strong>Choose the right driving instructor</strong></span></span></h3>

We would love to know if this has worked for you. Thank you.

[stevetheadi]

Thank you.

In the end the easiest fix was to create a new page using Cornerstone. After that, no problems.

[lely]

You’re always welcome!

Glad you were able to sort this out. Cheers!