Can anyone help me troubleshoot an issue with my sticky/floating bottom footer on a calorie calculator? It works fine on desktop but not on mobile. Any ideas what might be causing the problem?
HTML:
<footer class="footer">
<div class="summary">
<table id="nodecor">
<tr>
<th>Total Calories: </th>
<th>Carbs: </th>
<th>Fat: </th>
<th>Protein:</th>
</tr>
<tr>
<td class="bigtext"><span id="total">0</span> G</td>
<td class="bigtext"><span id="totalCarbs">0</span> G</td>
<td class="bigtext"><span id="totalFats">0</span> G</td>
<td class="bigtext"><span id="totalProteins">0</span> G</td>
</tr>
</table>
</div>
</footer>
CSS:
.footer {
padding: 10px;
height:15%;
position: fixed;
width:100%;
bottom: 0;
left: 0;
right: 0;
}
View the Codepen link for visualization and any assistance is greatly appreciated!