CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lopu
lopu

Reputation: 161

How can I rescale text size according to width size?

I have a header with some info about my page at the website http://danceforovariancancer.com.au

The header html is 

<div class="container-fluid myheader text-center">
    <div class="headeroc">
        Ovarian Cancer
    </div>
    <div class="headerdance">
        Dance-o-thon
    </div>
    <div>
        <a href="https://ovariancancer.secure.force.com/eventTicket?e=70116000000ob0m" target="_blank" class="btn btn-lg btn-reg uppercase btnmarg">Register</a><a href="https://ovariancancer.secure.force.com/CICD__SignUp?id=70116000000oakU" target="_blank" class="btn btn-spons btn-lg uppercase">get sponsors</a>
    </div>
    <div class="headerdate">
        <span class="glyphicon glyphicon-calendar"></span>May 14th <span class="mybold">2016</span>
    </div>
    <div class="kingston">
        <span class="mybold">3</span><time>pm</time> - <span class="mybold">11</span><time>pm</time>
at the <a target="_blank" href="https://www.google.com.au/maps/place/Kingston+City+Hall/@-37.9305426,145.0266516,14.25z/data=!4m2!3m1!1s0x6ad66eb237f62e3f:0xc9e49003d9d323c1!6m1!1e1" class="mybold">Kingston City Hall</a>
    </div>
    <div class="kingstonmap" id="kingstonmap">
    </div>

</div>

and uses just some text styling classes for the size and boldness and then some padding too. I realised that when I rescale the width of the site, the text just moves to the next line and it looks pretty ugly. Here is a demo of a nicely resizing header with text

Do they use media queries or something else because it re-sizes at nearly every width step so it doesn't seem like media queries, is there an implemented way to do this in bootstrap with classes? Will these re-size all the text so to speak relative to each others font size, so it all looks the same. Cheers :)

Thank-you

Upvotes: 0

Views: 71

Answers (2)

Ricky Goldman
Ricky Goldman

Reputation: 349

JavaScript is the way to do it smoothly (or I guess a media query for every pixel, but that's absurd). I'm not going to write a plugin on here, but basically you would do a window resize event and check if the height of the element changes. If it does, that means it's line broke, so you would change the font size. You'd also want to take line-height into account as you change font size.

For a much quicker solution, I've always liked the FitText plugin:

http://fittextjs.com/

Upvotes: 0

Brian S
Brian S

Reputation: 66

use vw instead of em

here is a link to another stack overflow page with a similar question.

Font scaling based on width of container

I think 8 or 9 vw will get it to around the size you want it to be at.

Cheers

Upvotes: 2

Related Questions