title: Sticky footer not working on mobile
body: <p>I would like to create a sticky / floating bottom footer for my calorie calculator, thing is, it works great on desktop, but not on mobile. Any ideas what might be the issue?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;footer class="footer"&gt;
      &lt;div class="summary"&gt;
          &lt;table id="nodecor"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Total Calories: &lt;/th&gt;
                  &lt;th&gt;Carbs: &lt;/th&gt;
                  &lt;th&gt;Fat: &lt;/th&gt;
                  &lt;th&gt;Protein:&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="bigtext"&gt;&lt;span id="total"&gt;0&lt;/span&gt; G&lt;/td&gt;
                  &lt;td class="bigtext"&gt;&lt;span id="totalCarbs"&gt;0&lt;/span&gt; G&lt;/td&gt;
                  &lt;td class="bigtext"&gt;&lt;span id="totalFats"&gt;0&lt;/span&gt; G&lt;/td&gt;
                  &lt;td class="bigtext"&gt;&lt;span id="totalProteins"&gt;0&lt;/span&gt; G&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .footer {
  
    padding: 10px;
    height:15%;
    position: fixed;
    width:100%;
    bottom: 0;
    left: 0;
    right: 0;
  }
  </code></pre>
  
  <p>Here's the <a href="https://codepen.io/Pbalazs89/full/aYabdO" rel="nofollow noreferrer">Codepen link</a> as it might be easier to visualize.</p>
  
  <p>Any help is appreciated!</p>