Maintaining Responsiveness When Adding Custom Text Classes to Twitter Bootstrap

Question

I'm trying to add my own class called "article-title" that is much bigger than twitter bootstrap's default H1 font size.

Could someone please outline what steps need to be taken in order to keep things responsive? I'd like to make sure that on smaller screens the text shrinks appropriately.

thank you

If this isn't super easy, than bootstrap doesn't seem to be doing a great job in aiding your workflow. Just saying... bootstrap is THE WORST!!! get out now while you still can!!! it has tons of insane type styles you'll have to fight with, when it's really just so easy without that Frankenstein's monster. — sheriffderek, Mar 02 '14 at 06:09

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

Use media queries and change the font-size based on the screen size

For example, this media query changes the font-size when your screen size is 320 pixels or below:

@media (max-width: 320px) {
    .article-title { font-size: 2em; }
}

example above demonstrated in stack question below

Responsive Font Size

good luck

edited May 23 '17 at 12:10

Community

1
1

answered Mar 02 '14 at 06:07

js_gandalf

881
8
18

1

(keep in mind the differences with the `@media screen only and() {} vs. @media () {} for older browsers) – sheriffderek Mar 02 '14 at 06:13
What does the @media tag do? – BrightIntelDusk Mar 18 '14 at 16:30

score 0 · Answer 2 · answered Mar 02 '14 at 06:27

0

Can this help you? http://simplefocus.com/flowtype/

Set the font-size in em for <h1> and then change font of body using px.

answered Mar 02 '14 at 06:27

Tushar

4,280
5
24
39

Maintaining Responsiveness When Adding Custom Text Classes to Twitter Bootstrap

2 Answers2