title: Change font size dynamically
body: <p>I have a responsive website.It works nice in full screen and mobile device size (on desktop or phone) <br>
  But when I change the size of the browser window some texts (mostly h1,h2.. sizes) interlaced with next text. It happens also at low resolution screens. You can see what i mean in those two screenshots:
  <a href="https://i.stack.imgur.com/KNgNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KNgNo.png" alt="This is ideal screen resolution and full screen"></a><br>
  <a href="https://i.stack.imgur.com/3I675.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3I675.png" alt="This is low resolution or not maximize window"></a>
  <br>I want to change font size dynamically, if possible only for some specific divs. <br>
  Is that possbile? How?<br></p>
  
  <p><a href="https://jsfiddle.net/tceydeliler/osjzw5xq/1/" rel="nofollow noreferrer">fiddle is here</a><br>
   code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col s12 m3"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-image"  style="height: 227.25px;"&gt;
                      &lt;div  id="dash_kullanicisayisi"  class="card-action  inside"&gt;
                          &lt;h1 class="center-align"style="font-size:100px; font-weight:lighter"&gt;125&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="card-content grey lighten-3"&gt;
                      &lt;span class=" card-title activator grey-text text-darken-4"&gt;Online kullanıcı &lt;/span&gt; 
                      &lt;p&gt;Online&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;div class="col s12 m3"&gt;
   &lt;div class="card"&gt;
                  &lt;div class="card-image "  style="height: 227.25px;"&gt;
  
  
                      &lt;div class="row valign-wrapper blue-text darken-4"&gt;
                          &lt;div id="dash_max_in" class="col s10 push-s2"&gt;
                              &lt;h1 class="valign right-align    red-text accent-4 " style="margin: 1.35rem 10px 0px 0px;"&gt;43.56&lt;/h1&gt;
                          &lt;/div&gt;
                          &lt;div class="col s2 pull-s10 valign-wrapper"&gt;
                              &lt;span class="flow-text valign"&gt;&lt;h5 class="valign red-text accent-44" style="margin-left:10px"&gt; Download &lt;/h5&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row valign-wrapper"&gt;
                          &lt;div id="dash_max_out" class="col s10 push-s2"&gt;
                              &lt;h1 class="valign right-align  indigo-text darken-4 " style="margin-right: 10px; margin-bottom: 0.68rem; margin-top: 0.68rem;"&gt;13.25&lt;/h1&gt;
                          &lt;/div&gt;
                          &lt;div class="col s2 pull-s10 valign-wrapper"&gt;
                              &lt;span class="flow-text valign  indigo-text darken-4"&gt;&lt;h5 class="valign" style="margin-left:10px"&gt; Upload &lt;/h5&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="card-content grey lighten-3"&gt;
                      &lt;span class="card-title activator grey-text text-darken-4"&gt;Maximum&lt;i class="material-icons right tooltipped"  data-position="bottom" data-delay="50" data-tooltip="Yoğunluk için tıklayınız"&gt;more_vert&lt;/i&gt;&lt;/span&gt;
                      &lt;p&gt;Günlük averaj&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-reveal"&gt;
                      &lt;span class="card-title grey-text text-darken-4"&gt;Maximum yoğunluk&lt;i class="material-icons right tooltipped"  data-position="top" data-delay="50" data-tooltip="Yoğunluk için tıklayınız"&gt;close&lt;/i&gt;&lt;/span&gt;
                      &lt;div class="row valign-wrapper blue-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem;"&gt;
                          &lt;div id="dash_max_in" class="col s10 push-s2"&gt;
                              &lt;h2 class="valign right-align  red-text accent-4" style="margin-right:-1rem;margin-left:-1.5rem"&gt;25.25&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div class="col s2 pull-s10 valign-wrapper"&gt;
                              &lt;span class="flow-text valign"&gt;&lt;h5 class="valign  red-text accent-4" style="margin-left:0px"&gt; Download &lt;/h5&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row valign-wrapper indigo-text darken-4" style="margin-right:-1rem;margin-left:-1.5rem"&gt;
                          &lt;div id="dash_max_out" class="col s10 push-s2"&gt;
                              &lt;h2 class="valign right-align indigo-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem; margin-bottom: 0.68rem; margin-top: 0.68rem;"&gt;20.22&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div class="col s2 pull-s10 valign-wrapper"&gt;
                              &lt;span class="flow-text valign"&gt;&lt;h5 class="valign" style="margin-left:10px"&gt; Upload&lt;/h5&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
       &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>