CODEWITHSUNDEEP
javascriptcsszurb-foundation
Scot Nery
Scot Nery

Reputation: 689

Unable to resize text to widths of Foundation divs

It looks like slabtext.js can't see the width of foundations divs somehow. I have been trying to resize after loading and stuff like that, but I can't get good results. simple as can be

<div class="row">
<div class="small-6 columns">
    <h1>HEre's Some Text to fill things up and look great'</h1>
</div>
<div class="small-6 columns">
    <h1>
<span class="slabtext">here's some</span><span class="slabtext">other text please work somehow!</span>
    </h1>
</div>

The text in column two should read "here's some(linebreak)other text please work somehow!" and all text should resize to be 100% width of column

here's a fiddle... https://jsfiddle.net/scotnery/wf9egscs/9/

I have been getting the same problem testing out fittext.js & bigtext.js

How do I modify JS or CSS to get correct sizing, please?

Upvotes: 0

Views: 60

Answers (1)

Yash Jain
Yash Jain

Reputation: 1

Add a simple table in your code, as I did, you can see, like this. Look here in this jsfiddle. Although tables should NOT be used like this, it solves the problem in this situation.

HTML

<div class="row">
  <div class="small-6 columns">
    <h1>HEre's Some Text to fill things up and look great'</h1>
  </div>
  <div class="small-6 columns">
    <h1>
    <table>
      <tbody>
        <tr>
          <td><span class="slabtext">here's some</span></td>
        </tr>
        <tr>
          <td><span class="slabtext">other text please work somehow!</span></td>
        </tr>
      </tbody>
    </table>
    </h1>
  </div>
</div>

CSS

h1{
  line-height: .85;
}

Javascript

$(document).foundation();
$("h1").slabText();

Upvotes: 1

Related Questions