title: Responsive ribbon-type header
body: <p>I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.</p>
  
  <p>Is there a way I can make the text responsive, or flow to a double line on smaller screens?</p>
  
  <p>I have put the code into JS fiddle to show what I am using <a href="https://jsfiddle.net/ubyk67uo/" rel="nofollow noreferrer">here.</a></p>
  
  <pre><code>h3.ribbon {
  background: #c3d5d8;
  margin-top: 0px !important;
  margin-left: -30px;
  padding-left: 20px;
  color: #fff;
  border-bottom: 40px solid #c3d5d8;
  border-right: 20px solid #fff;
  height: 0px;
  line-height: 40px;
  font-size: 18px !important;
  font-family: 'ProximaNovaThin';
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  font-weight: bold;}
  </code></pre>