Responsive-text 2

Question

Hello,

I am trying to use FitText.js to make my title called "CSS Preprocessor" more scallable. I am following the video, and I have the 3 script lines at the bottom that are supposed to stop this title from breaking into 2 lines when I narrow the viewport, however when I narrow the viewport to 334px, the title "CSS Preprocessors" breaks into 2. How can I adjust the scripts so that the title never breaks when it gets resized (which I believe is the purpose of using FitText.js?

<script src="js/jquery.fittext.js"></script>

2) I have the jquery.fittext.js file in a folder called js Am I supposed to have the below script in a foldfer. I have looked but I cant find a folder for it anywhere.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

3) If the answer to number 2 is "no", could I have used another jquery.min.js version? How do I know which version goes with this jquery.fittext.js

FitText's link for reference: https://github.com/davatron5000/FitText.js

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Text Layout</title>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>

    <style>
    /* ---------------------
    Reset Margins
------------------------ */

body, h1, h2, h3, p {
    margin: 0;
}

/* ---------------------
    Page Styles
------------------------ */

* {
    box-sizing: border-box;
} 

body {
    padding: 1em 0;
    border-top: 8px solid #222;
    background: #f9f9f9;
    color: #333;
    font-family: 'PT Serif', serif;
    font-size:1.125em;
    }
a {
    color: #d24c39;
}
.wrap {
    margin: 0 auto;
    max-width: 58%;
}
.title {
    font-size: 4em;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: 1.1;
}
h2, h3 {
    font-family: 'PT Sans', sans-serif;
}
h2 {
    margin: 1em 0 .8em 0;
    color: #2B9BD4;
    letter-spacing: -1px; 
    font-size: 36px;
    line-height: 1.1;
    font-size:2em;
}
h3 {
    margin: 1.7em 0 .8em 0;
    color: #222;
    font-size: 1.333em;
}
p {
    margin: 1em 0;
}
img {
    padding: .5em;
    width: 100%;
    border: 1px solid rgba(34,34,34,.3);
}
blockquote {
    position: relative;
    margin: 0 0 0 3em;
    padding: 0 1.7em 0 0;
    color: rgba(34,34,34, .8);
    font-style: italic;
}
blockquote:before {
    position: absolute;
    top: -30px;
    left: -55px;
    color: rgba(77,195,255,.5);
    content: "\201C";
    font-size: 4.5em;
}
.code {
    padding: 1.1em;
    border: 1px solid #dae0a7;
    background: #eef2ca;
    color: #ccc;
    color: rgba(34,34,34, .8);
    white-space: pre;
    font-family: 'Consolas', monospace;
    line-height: 1.35;
    font-size:1rem;
}

/* ---------------------
    Media Queries 
------------------------ */


@media screen and (max-width: 599px) {
.wrap{max-width:85%;}
body{font-size:1em;}


}


@media screen and (min-width: 980px) {
.wrap{
max-width:600px;}

} 




    </style>
</head>
<body>
    <div class="wrap">
        <h1 id="title" class="title">CSS Preprocessors</h1>
        <p class="intro">
            You've probably already heard of <a href="#">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="#">Sass</a>, <a href="#">LESS</a> and <a href="#">Stylus</a>.
        </p>
        <h2>What's a Preprocessor?</h2>
        <p>
            Preprocessors <b>compile the CSS code we</b> write in a processed language to the pure CSS syntax we're all used to. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available. 
        </p>
        <p>
            Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that &ldquo;If it's not broken, don't fix it.&rdquo; But lately, many have realized just how powerful preprocessors can make our CSS.
        </p>
        <blockquote>
            Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin&hellip;
        </blockquote>
        <h2>Why Use One?</h2>
        <p>
            There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create <a href="#">variables</a> from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage.
        </p>
        <p>
            Preprocessors save us time and do a lot of the tedious stuff for us because they have all the neat features we wish plain vanilla CSS had, like nesting selectors, math functions, referencing a parent selector, even reporting errors by telling us where and why there are errors in our code&hellip;
        </p>
        <h3>Example Syntax:</h3>
        <div id="code" class="code">.headline
   color: blue
   font-size: 2em</div>
        <p>
            Hopefully now you're feeling more confident about using a CSS preprocessor. When in doubt, you can always fall back to plain CSS in your preprocessor file. Remember that you're not learning an entirely new language&mdash;just a new syntax.
        </p>
        </div>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script type="text/javascript">
        $("#title").fitText(.75, { minFontSize: '46px', maxFontSize: '72px' });
    </script> 
</body>
</html>

Answer 1 · 2014-09-11T05:22:49Z

September 11, 2014 5:22am

1: As far as I can tell, you've done everything right, but...your minimum font size of 46px is probably too large for such a long title on such a small screen. Try bumping it down to something like 20px to see if you get the desired effect.

2: No need to put this script in a folder. The way you have it set up, you're using Google's Content Delivery Network to host the file for you. You CAN download a version of the file and host it on your own server if you prefer, but what you've done here is perfectly acceptable.

3: Any version of jQuery should work just fine.

Answer 2 · 2014-09-15T06:10:42Z

September 15, 2014 6:10am

Thanks Shawn, these 2 answers were exactly what I was looking for. As for fittext, my mistake was in the directory; my html was in another folder.......

Again, thank for the CDN explanations!!!

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

Responsive-text 2

2 Answers

Shawn Flanigan

Shawn Flanigan

orange sky

orange sky

Shawn Flanigan

Shawn Flanigan

orange sky

orange sky

orange sky

orange sky