CODEWITHSUNDEEP
csstwitter-bootstrap
Midnight Cabbie
Midnight Cabbie

Reputation: 1

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.

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>

Upvotes: 0

Views: 2060

Answers (1)

Hkidd
Hkidd

Reputation: 912

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

Upvotes: 1

Related Questions