How to create Bootstrap 3 responsive text using rem units - css

Question

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.
html {
font-family: 'NimbusSanNov-Reg', "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", sans-serif;
font-size: 15px;
/* set default 1rem = 15px */
color: #302C25;
line-height: 1.618;
-webkit-text-size-adjust: 100%;
/* why is this needed? */
-ms-text-size-adjust: 100%;
}
body {
background-color: #FFF;
}
#page {
position: relative;
top: 5.33rem;
left: 7.4rem;
padding-bottom: 7.667rem;
}
.container-full-width {
position: relative;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.row-centered {
text-align: center;
}
#testBox {
position: relative;
display: inline-block;
margin-top: 0;
margin-left: 60rem;
width: 10rem;
height: auto;
}
.bigText {
font-family: 'NimbusSanNov-Reg''HelveticaNeueLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'HelveticaNeue', sans-serif;
font-size: 1rem;
margin: 0 0 1.667rem 0;
letter-spacing: .0667rem;
}
.bigTextItalic {
font-family: 'NimbusSanNov-RegIta', 'HelveticaNeueLightItalic', 'HelveticaNeue-LightItalic', 'Helvetica Neue LightItalic', 'HelveticaNeueItalic', sans-serif;
font-size: 1rem;
letter-spacing: .0667rem;
margin: 0 0 1.667rem 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="page" class="container-fluid container-fluid-full-width">
<div id="homeBrandCopy" class="container-fluid container-full-width">
<div class="container">
<div class="row row-centered">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="testBox center-block">
<p class="text-center bigText">Every writer is cursed or blessed with a unique creative metabolism: the distinctive speed and efficiency with which he or she converts the raw fuel of life into the mystical,<span class='bigTextItalic'> dancing blue smoke of art. </span>
</p>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>

Answer 1

Please make sure there is no space between the # and media because CSS sees #media as a media query.
CSS:
#media only screen and (max-width 1200px) {
html {
font-size: 1.333rem;
line-height:2.157;
color:#000FFF;
}
}
#media only screen and (max-width 992px) {
html {
font-size: 1rem;
line-height:1.618;
color:#FF0000
}
}
#media only screen and (max-width 768px) {
html {
font-size: .933;
line-height:1.510;
color:#00FF00;
}
}
#media only screen and (max-width 480px) {
html {
font-size: 1.067;
line-height:1.726;
color:0000FF;
}
}
#media only screen and (max-width 320px) {
html {
font-size: 1.333;
line-height:2.157;
color:#FF00FF;
}
}
Reference: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp