Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Megan Broesder
Megan Broesder
4,413 Points

Responsive Text - FitText isn't working

<p>I'm working on Responsive Text and Vertical Rhythm (part 2) and I can't seem to get FitText to work. In index.html I have: </p>

<pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script> <script src="js/jquery.fittext.js"></script> <script type="text/javascript"> $("#title").fitText(.83, { minFontSize: '46px', maxFontSize: '72px' }); </script> </code></pre>

<p>In style.css the title is formatted as: </p>

<p>.title { font-size: 4em; font-family: 'PT Sans Narrow', sans-serif; line-height: 1.1; }</p>

<p>I've gone over the code several times and can't see what I'm doing wrong. How do I get FitText to work?</p>

7 Answers

James Barnett
James Barnett
39,199 Points

Megan Broesder -

Your code should work, assuming you have an id that matches the one you referenced in your JavaScript and that your path to your fittext.js file is valid.

I made a quick demo to show you

Megan Broesder
Megan Broesder
4,413 Points

Thanks so much! I'll play around with it more today and see if I can make it work!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You use the ID title (#title) in the script but in the CSS you have the class title (.title).

Change the script to select ".title" instead of "#title" and it should work.

Megan Broesder
Megan Broesder
4,413 Points

Thank you for spotting that! I tried changing it and it still does not work :(

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You used the title class on a header or paragraph tag right?

Megan Broesder
Megan Broesder
4,413 Points

I just used it on the h1 tag

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

The closing script tag for jquery is messed up

Megan Broesder
Megan Broesder
4,413 Points

I don't know anything about jquery yet, but on GitHub the code is slightly different than what was provided. I changed it so it is now:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery(".title").fitText(.83, { minFontSize: '46px', maxFontSize: '72px' });
</script>

Sadly, this is still not working. Thanks so much for the help, I really do appreciate it!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Megan Broesder - The forum uses markdown to correctly format code, check out this thread on how to type code in the forum for some examples. It's easier to read that way, because then there is built-in syntax highlighting.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

This may be a silly question, but did you actually download the FitText.js file and place it in the same folder as your index.html? I'm aware you have likely solved this by now, but I'd like to leave this as a note here for anyone else who may search the forum for an answer, as the title of this one is the best result.:)

julcap
julcap
16,274 Points
julcap
julcap
16,274 Points

not sure why... but for me the example work when I download fittext directly from treehouse but not from github. perhaps someone else knows the reason for this