How to create Bootstrap 3 responsive text using rem units

I am attempting to create a rem based site using Twitter-Bootstrap 3. In particular my text is not behaving responsively. It is just wrapping without changing font size or line height. I added a color change to the @media statements to visually track the break points. I'm not seeing any color changes either so the custom @media code is also not working. From what I have researched, it should be working. Obviously, I'm missing something. Please take a look at https://jsfiddle.net/dlearman/995w62e0/4/ and steer me in the right direction.
dlearman1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Several problems with your css.

- Bootstrap sets the font color on the body instead of the html so I corrected that in the media queries.
- There is no space between the @ and 'media' in @media.
- There needs to be a colon after max-width like (max-width: 320px).
- All font-sizes and line-heights need a unit. I filled in 'rem' on those.

https://jsfiddle.net/995w62e0/6/
0
dlearman1Author Commented:
Tom... Thanks for your help. Things are looking much better now. I made  Few changes in the fiddle. 1) I set the base font-size to 10px inside html. My plan is to set 1 rem = 10px which should make mental conversion math easier. 2) Inside the @media blocks I am setting the font-size in rems on the body tag, instead of on the html tag. I'm thinking this will preserve a consistent base font size. Changing the html font size will scale the entire page. 3) I purged some unused classes from the html markup as a simplification.

The font sizes do change, but I'm having a difficult time verifying that the resulting font sizes are correct. Also, a put the text block inside a div to make sure the overall text block scaled. This isn't happening, maybe because the div doesn't have an intrinsic size? How can I trap the text to scale correctly.

Thanks for your time and expertise.
0
dlearman1Author Commented:
Tom... After a longer second look I can say that the font resizing is definitely not happening.
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tom BeckCommented:
It's working fine in my tests using Firefox.

Let's see your latest attempt.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dlearman1Author Commented:
I most have been looking at an old jsFiddle version, cause you're right it is working.  

Thanks for your help. Next problems to tackle are responsive background images and containing text inside a responsive div. But, these are separate questions.
0
dlearman1Author Commented:
Forgot the jsFiddle link. Here it is: https://jsfiddle.net/dlearman/995w62e0/
0
Tom BeckCommented:
Glad you got it sorted out. Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Page Layout Software

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.