Using Bootstrap, but Text not Responsive

Question

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.

Answer 1

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.

Answer 2

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.