0

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

lopu
  • 121
  • 1
  • 1
  • 10
  • They don't use media query, that's a window.onresize() function that's called every time the browser resize and recalculate the header's font size. I wouldn't recommend doing so though. – AVAVT Dec 04 '15 at 04:46

2 Answers2

2

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

Community
  • 1
  • 1
Brian S
  • 66
  • 5
  • as in the font size as 8vw; instead of 3em;? Does vw automatically scale because it acts similar to setting the height of a container as 50vh;? Thanks I'll try it out :) – lopu Dec 04 '15 at 05:13
  • yup! my advice would be to use 3em first, then put 8vw below it. This way if the vw fails it has 3em to fall back on. It works kind of like a font stack. Do this just in case for cross browser support. – Brian S Dec 04 '15 at 05:18
  • Another way to do this is to set media queries and change the font depending on the size of the width. – Brian S Dec 04 '15 at 05:20
  • Yeah brian it worked, thank-you very much. I tend to develop and test on chrome, dolphin browser mobile and chrome mobile and that's it but I'll add the rem font size's underneath too but they won't resize if someones using ie or safari or which browsers? Cheers – lopu Dec 04 '15 at 06:02
0

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/

Ricky Goldman
  • 349
  • 1
  • 7
  • Oh cool I will check this out, is there a database of js plugins? – lopu Dec 04 '15 at 06:03
  • I'm sure there are databases, but I don't know of it. I usually like writing my own code, but sometimes a plugin can save a lot of time. They are pretty easy to find by googling "desired behavior javascript plugin". – Ricky Goldman Dec 04 '15 at 06:08