title: css <hr class="divider"> responsive
body: <p>Problem is about , it works great on desktop but on mobile fails....</p>
  
  <pre><code> [http://jsfiddle.net/9vv914uL/][1]
  </code></pre>
  
  <p>i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....</p>
  
  <p>and bonus is to make words inside <hr> tag in different colors...</p>
  
  <p>this is css stylesheet:</p>
  
  <pre><code>.divider {
      text-align:center;
      font-family: 'montserrat';
  }
  
  .divider hr {
      margin-left:auto;
      margin-right:auto;
      width:40%;
  
  }
  
  .left {
      float:left;
  }
  
  .right {
      float:right;
  }
  </code></pre>
  
  <p>this is </p>
  
  <pre><code>&lt;div style="padding-top:10px; padding-bottom:20px;"class="divider"&gt;
  &lt;hr class="left" style="margin-top:12px;"/&gt;BLUE RED&lt;hr class="right" style="margin-top:12px;"/&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I dont know what to say about this problem, this is just plain text. I must go back to the stars &lt;3</p>
  
  <p>:)</p>