Font Size Problems

Question

I'm creating a website and having some problems with font sizes. I can make it look good while on a computer, but on a phone the font sizes gets weird.

When on a phone, the 'Back' buttons get really small and the paragraphs gets enlarged, and I can't get it to look the same as on a computer.

Html

<div class="Class" id="ID">
    <br><br>
    <h3><u>Title</u></h3>
    <p>Some random text</p>
    <a href="#top">Back</a>         
</div>

CSS

.Class
{
    font-size:15px;
    padding:20px;
    width:600px;
}
.Class p
{
    font-size:20px;
}
.Class a
{
    color:black;
    display:block;
    width:80px;
    margin:0;
    padding:10px;
    font-size:24px;
}
.Class a, visited
{
    color:black;
}
.Class a:hover
{
    background-color:rgb(240,240,240);
}

The result is on a phone is that gets small and the paragraphs gets bigger. Not sure what's relevant, I'm still a novice.

Answer 1

You have to use em instead of pixels. I you don't know what em means: Em is relatively to the font-size. So when you have 2em it is 2 times the size of the current font.

So you have to change your CSS to:

    .Class
    {
        font-size: 0.938em;
    }

And:

    .Class p
    {
        font-size: 1.25em;
    }

And:

    .Class a
    {
        font-size: 1.5em;
    }

Or if you want to copy and paste easily:

    .Class
    {
        font-size:0.938em;
        padding:20px;
        width:600px;
    }
    .Class p
    {
        font-size:1.25em;
    }
    .Class a
    {
        color:black;
        display:block;
        width:80px;
        margin:0;
        padding:10px;
        font-size:1.5em;
    }
    .Class a, visited
    {
        color:black;
    }
    .Class a:hover
    {
        background-color:rgb(240,240,240);
    }

If you want to know how much px is in em you can look it up here: http://pxtoem.com/

Answer 2

You have font sizes in pixels, so they look smaller on the phone. You have two options here, either define larger pixel sizes for smaller devices using media queries, or use em's instead of pixels.

option 1 example :

.Class {
    font-size: 15px;
}

@media all and (max-width: 640px) {
    .Class {
        font-size: 18px;
    }
}

Option 2 Example:

.Class {
    font-size: 1.2em;
}