title: Font size extremely small on mobile devices
body: <p>I have a <code>&lt;p&gt;</code> block in a huge <code>&lt;div&gt;</code> in the main body of my html with 80% in <code>font-size</code>, and also I have a footer <code>&lt;div&gt;</code> in the lower part of my body.</p>
  <p>The text in the footer has also 80% <code>font-size</code>, and if I test it on my PC it is equal, but if I test it in a mobile device, the text of the footer is extremely small, impossible to be read.</p>
  <p>How is this possible? Which is the explanation and how can this be avoided?</p>
  <p>My main text:</p>
  <pre><code>&lt;div id=&quot;mainTextContainer&quot; class=&quot;text&quot;&gt;
      &lt;p&gt;test text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My footer:</p>
  <pre><code>&lt;div id=&quot;cookiesBar&quot;&gt;
      &lt;div&gt;
          Esta web utiliza 'cookies' para su navegación.
          Al utilizar nuestros servicios aceptas su uso.         
      &lt;/div&gt;
  &lt;/div&gt;
      
  </code></pre>
  <p>My CSS:</p>
  <pre><code>#cookiesBar {
      display: none;
      position: fixed;
      left: 0px;
      right: 0px;
      bottom: 0px;
      width: 100%;
      text-align: center;
      height: auto;
      background-color: rgba(136, 188, 182, 0.7);
      z-index: 99999;
      border-radius: 0px;
      text-decoration: none;
      line-height: 30px;
      font-size: 80%;
      font-family: verdana;
  }
  
  #mainTextContainer {
      width: 80%;
      margin: auto;
      text-align: center;
      margin-top: 60px;
  }
  
  .text {
      font-size: 80%;
  }
  </code></pre>