On my simple webpage, I have a combination of text and a table. Check out the HTML below:
<body>
<div id='stat'>
<p class='subheading'>Stat of the Week: Average Final Standings</p>
<p class='text'>Every week, I plan to share a league history stat here. If you have any suggestions for future stats, feel free to let me know. This week's stat is the Average Final Standings of each owner over the years. Here are the results:</p>
<table class='tableBody' style='margin: auto;'>
<tr class='tableHead'><td colspan='3'>Average Finish</td></tr>
<tr class='tableSubHead'>
<td>Team Owner</td><td>Years Played</td><td>Average Place</td>
</tr>
<tr class='light'>
<td class='nocenter'>Team #1</td><td>2007-2012</td><td>5.04</td>
</tr>
<!-- more rows here -->
</table>
<p class='text'>Coming Up Next Week: Average Points Per Week</p>
</div>
</body>
Here is the corresponding CSS:
body {
background-image: url(http://g.espncdn.com/s/ffllm/13/images/shell/bgHead.jpg);
background-repeat: no-repeat;
padding: 0px;
padding-top: 10px;
font-size: 14px;
margin: 0px;
color: #000;
font-family: verdana, arial, helvetica, sans-serif;
}
.tableBody {
font-size: 1em;
color: #000;
text-decoration: none;
text-align: center;
width:50%;
}
.nocenter {
text-align: left;
}
.tableBody td {
padding: 5px;
}
.tableHead {
font-size: 1.2em;
color: #fff;
padding: 5px;
background-color: #6dbb75;
text-align: center;
}
.tableSubHead {
font-size: 1.1em;
color: #000;
padding: 5px;
background-color: #6dbb75;
text-align: center;
}
.light {
background-color: #f8f8f2;
}
.dark {
background-color: #f2f2e8;
}
Everything displays perfectly on my laptop browser, but when viewing it on my phone, the table appears tiny! Even with a three times larger font size, it's still small. Can anyone explain why this happens and suggest a solution?
This issue occurs on a Samsung Galaxy S2 using the latest Firefox browser (v24).
Update: I've experimented with various units like px, em, %, etc., but nothing seems to work. While I can implement a workaround by detecting a mobile browser and adjusting the layout, I'm curious about the discrepancy in text rendering despite specifying the same font.