CODEWITHSUNDEEP
cssresponsive-designtwitter-bootstrap-3css-frameworks
user2503303
user2503303

Reputation: 162

Bootstrap 3 responsive h1 tag

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 mobile devices since the word is too large. Is there a way I can make the h1 tag reduce in size to fit in the container on smaller mobile devices ? The site is muscadinewinerecipe.com if anyone wants to view what I'm talking about. It's the about page and privacy policy page.

Upvotes: 13

Views: 45115

Answers (3)

Timothy
Timothy

Reputation: 3593

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

Upvotes: 2

wirando
wirando

Reputation: 21

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.

Upvotes: 2

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

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

Upvotes: 25

Related Questions