title: Font size changing based on amount of text on page on mobile devices
body: <p>I have a website with inconsistent font sizes on different pages. After a lot of experimenting, I found that the fonts (the links below the title that say "About, Poetry, etc") are correct as long as there is enough text on the website, but are wrong when the amount of text changes. Which is crazy. But here's the proof:</p>
  
  <p><a href="https://i.stack.imgur.com/SMCFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SMCFg.png" alt="This version is not working"></a></p>
  
  <p><a href="https://i.stack.imgur.com/omUDH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/omUDH.png" alt="This version is working"></a></p>
  
  <p>In both the HTML and CSS, I always refer to fonts in terms of em not pt. And no tags are being deleted when I remove the text:</p>
  
  <p>Doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div id="page_content" &gt;
            &lt;h1 class="section-titles"&gt;&lt;strong&gt;About&lt;/strong&gt;&lt;br&gt;
            &lt;/h1&gt;
            &lt;p id="reveal-on-small-display"&gt;&lt;/p&gt;
            Lorem ip         
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;br/&gt;
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- End of Page Content --&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Works:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div id="page_content" &gt;
            &lt;h1 class="section-titles"&gt;&lt;strong&gt;About&lt;/strong&gt;&lt;br&gt;
            &lt;/h1&gt;
            &lt;p id="reveal-on-small-display"&gt;&lt;/p&gt;
            Lorem ipsum Lorem ipsum
  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum         
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;br/&gt;
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- End of Page Content --&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>I can attach the CSS and HTML in full if it's helpful, but essentially if I need to</p>