1

I'm trying to get the contents of a h1 element to adjust the font size in order to ensure that the text fills exactly 100% of the width of its parent div.

I've tried a few different plugins, including fittext.js, slabtext.js and bigtext.js, but can't get any to work.

Does anyone have any idea how I could get this kind of effect in the example below for the .sectionTitle h1 elements.

Codepen: https://codepen.io/anon/pen/NpYJKK.

Example HTML:

 <section id="contact">

   <div class="sectionContent">

     <h1 class="sectionTitle">Contact</h1>

   </div>

 </section>
azurefrog
  • 10,785
  • 7
  • 42
  • 56
  • Maybe if you use a span inside the h1 you could programatically increase the span's font size until the span width matches the h1 width. – Andre Paschoal Mar 22 '17 at 11:10
  • I'm not sure what you mean or how I'd do that. –  Mar 22 '17 at 11:11
  • Please don't attempt to remove your question via vandalism. If you want to communicate with other posters, you can leave a comment on your question, or even edit it to add notes, but you shouldn't remove the content itself, especially when there are upvoted answers on it. – azurefrog Mar 22 '17 at 21:04

1 Answers1

0

FitText.js should do what you need.

Add the necessary js files, and then add this line to your code:

jQuery(".sectionTitle").fitText(.5);

Note that a compression value of .5 seemed to be necessary to make your text stretch full width.

codepen demo

sol
  • 22,311
  • 6
  • 42
  • 59
  • Only one of the elements actually fills the full width of the viewport –  Mar 22 '17 at 11:52