Bootstrap 3 responsive h1 tag

Question

I am creating a site and want it to be responsive so I am using bootstrap 3. However, the h1 tag on the privacy policy page and about page come out of the container on small mob

Answer 1

For Boostrap 4 you can use this mixin collection which I created for myself - very handy one https://github.com/Omi0/boostrap-mixins

Answer 2

You can use this :

CSS :

h1{
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -o-hyphens: auto;
     hyphens: auto;
}

DEMO : http://jsfiddle.net/ckq04r5q/

Or if you want more browser compatibiliy you can sibling your h1 with id or class and reduce font-size with media query on < 768px

CSS :

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

When your screen as less to 768px of width the property has running

Answer 3

I've had the same problem, which I've solved with jQuery:

function resize() {
    var n = $("body").width() / 17 + "pt";
    $("h1").css('fontSize', n);
}
$(window).on("resize", resize);
$(document).ready(resize);

The ratio can be adjusted by replacing the value 17 and it can be used for other tags by changing the h1.