CODEWITHSUNDEEP
twitter-bootstrap
user2800027
user2800027

Reputation: 211

Using Bootstrap, but Text not Responsive

I am working on a school project : http://lauralynn87.github.io/WSP/Project/index.html

and I am using the framework Bootstrap 3.0 - and almost everything is responsive, but the text.

I've tried using percentages and ems for font sizes..but nothing is working. I know I'm missing something, but can't figure it out.

Any help is appreciated.

Thanks.

Upvotes: 21

Views: 75484

Answers (5)

Eissa
Eissa

Reputation: 325

you can use Viewport Sized Typography.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

the text size changes according to the view port (browser's width and height).

more details https://css-tricks.com/viewport-sized-typography

Demo : https://css-tricks.com/examples/ViewportTypography/

Upvotes: 5

Steve Tarver
Steve Tarver

Reputation: 3228

Here is a mobile first css snippet for screen only using Bootstrap device sizes. Comments:

  • Bootstrap does not scale typography in response to display size changes.
  • Do you really want the same font size on a 27" monitor as a smart phone? I see several good designs where different font sizes for different screens make sense. Testing will prove your design right or wrong.
  • Do you really want screen and print font sizes to be the same? Screen and print are different beasts. If you care about printing, you should test it separately.
  • The font scaling I use below is arbitrary - no magic there.

.

/* xs < 768 */
@media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
}

/* sm */
@media screen and (min-width: 768px) {
    body {
        font-size: 1em;
    }
}

/* md */
@media screen and (min-width: 992px) {
    body {
        font-size: 1.2em;
    }
}

/* lg */
@media screen and (min-width: 1200px) {
    body {
        font-size: 1.3em;
    }
}

A jsfiddle that shows the effects: https://jsfiddle.net/stevetarver/9a8ym3hL/embedded/result/. Note that the media queries are only changing th, td font sizes, not body as shown above.

Upvotes: 26

Syed Fazle Rahman
Syed Fazle Rahman

Reputation: 132

I would suggest Fittext jQuery plugin to make all the text responsive by default. It requires only 2 js files and a single line of jQuery code. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
          $("body").fitText();
  });
</script>

Refer Fittext

Upvotes: 6

Felix G.
Felix G.

Reputation: 6691

Fonts are not responsive if you use % or em etc.

If you want to change the size of your font on different screen/window sizes, you have to use media queries in CSS.

For example:

@media all and (max-width: 1200px) { /* screen size until 1200px */
    body {
        font-size: 1.5em; /* 1.5x default size */
    }
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    }
@media all and (max-width: 500px) { /* screen size until 500px */
    body {
        font-size: 0.8em; /* 0.8x default size */
        }
    }

The numbers are of course only examples.

Upvotes: 28

Adam &#39;Sacki&#39; Sackfield
Adam &#39;Sacki&#39; Sackfield

Reputation: 602

add your own media queries to change the font size depending on the screen size. see here

Upvotes: 0

Related Questions