Why is this text appearing so small on my mobile device?

Question

In the image below you can see that on this example page from my personal website, when viewed on a desktop browser, the text outlined in the red box is appearing at a size equal to the the text immediately to the left. However, on my Galaxy S5, using the Firefox app, the text appears unusually small relative to the other text on the page.

Why is my mobile device rendering this text at a different size than my desktop computer?

This is the SASS code relevant to the text in question:

.blognav {
    position: relative;
    border-bottom: thin solid $base_colour_800;
    width: 100%;
    margin: 1em 0 2em 0;
    padding-bottom:1em;
    min-height: 3em;
    overflow:hidden;
}

.next a,
.previous a {
    position: absolute;
    width: 50%; // inherits from blognav, not from .next or .previous, so it has to be 50%, not 100%
    height: 100%;
    color: $font_colour;
    text-decoration: none;
    font-style: bold;
    box-shadow: none;
    overflow: hidden;
}
.next a {
    /* Because the anchors are absolute position, and the right nav link is
    right-aligned, this forces the a to start at the right edge and head toward
    the right from there, which puts it in the wrong place. This margin setting
    backs it up so that it's in the right place.'*/
    margin-left: -50%;
}
.blognav a:hover {
    color: $base_colour_700;
    box-shadow: none;
}
.blognav p {
    color:$base_colour_800;
    margin: 0;
    padding: 0;
}
.next:hover,
.previous:hover {
    color: $base_colour_800;
    text-decoration: underline;
}
.next,
.previous {
    display: relative;
    border:transparent thin solid;
    width:50%;
}
.next {
    float: right;
}
.next p {
    text-align: right;
}
.previous {

}

This is the HTML:

<div class="blognav"><div class="next"><p><a href="Gordon at the Conbini"></a>
</p>
<p>Next blog entry <span class="arrow-e"></span></p>
<p><strong>Gordon at the Conbini</strong></p>
</div>
<div class="previous"><p><a href="Why Self Publish"></a>
</p>
<p><span class="arrow-w"></span> Previous blog entry</p>
<p><strong>Why Self Publish</strong></p>
</div>
</div>

Answer 1

Try this:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

You need to use this because not every pixel is the same (like you can read in the link), and this meta tag fix that problem

And here is a link that explains how it works