title: Arctext.js Responsive Text
body: <p>I'm using arctext.js to make a curved styled look. However, when using media screen, it doesn't help to downscale the font site when in responsive mode. 
  I do have viewpoint and using bootstrap 4. 
  Are there other options to downscale the font to fit mobile devices?</p>
  
  <p><a href="https://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/" rel="nofollow noreferrer">Arctext.js</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="mainimg"&gt;
      &lt;div class="container-fluid maintxt"&gt;
      &lt;h1 id="curve" class="mainh1 mb-4"&gt;Krista Andrews&lt;/h1&gt;
          &lt;p&gt;Front-End Web Developer &amp;amp; Digital Designer&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
          $().ready(function() {
              $('#curve').arctext({radius: 400});
          });
      &lt;/script&gt;
  &lt;script src="jquery.arctext.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.mainimg{
      background-image: url("images/one.jpg");
      background-position: center bottom;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      position: relative;
      height:500px;
      width:100%;
  }
  @media screen and (max-width: 480px) and (min-width: 320px), (min-width: 300px) {
    div.mainimg {
      background-image: url("images/one.jpg");
      background-position: center bottom;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: cover;
      position: relative;
      height:500px;
      width:100%;
      width:100%;
    }
  }
  .maintxt{
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
  }
  .mainh1{
      font-family: 'Chonburi', cursive;
      font-size:2.5em;
  }
  </code></pre>