Inconsistency paragraphs textsize

Question

I have the following html

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Lorem Ipsum </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="frameT">
        <div class="frameTC">
            <div class="clearfix quote">
                <p id="quote">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu leo, viverra vel sodales vitae, ornare eget sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent a orci at nisi pellentesque pharetra. Vivamus in interdum ex, sed accumsan mi. Etiam auctor ante dui, vel ornare diam sollicitudin non.
                </p>
                <p id="name"> - Lorem Ipsum</p>
            </div>
        </div>
    </div>
</body>
</html>

And the following CSS

html {
    font-size: 62.5%;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.frameT {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.frameTC {
    display: table-cell;
    vertical-align: middle;
}

.quote {
    margin: 0 auto;
    padding: 1rem;
    max-width: 69.5rem;
    width: 65%;
}

#quote {
    float: left;

    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2.2rem;
    color: #777;
}

#name {
    float: right;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 3.2rem;
    color: #2ac;
}

On desktop it looks fine and the bottom text is the size it should be. On mobile however the bottom paragraph is tiny. At first I had it in a span, but that didn't seem to cause it. When inspecting the paragraph on mobile using Developer Tools the css is normal but the visual isn't.

EDIT: Here's how it looks on mobile for me http://puu.sh/mpTsJ/927670b8e7.jpg

EDIT2: Found out that it has to do with the amount of text in the paragraph. Seems like around 140 characters the text becomes big on mobile even though the real font-size doesn't change.

Sean · Accepted Answer · 2016-01-10T01:22:50.773

0

EDIT: Problem was solved by adding a viewport meta tag.

When using the rem font-sizing trick, you need to remember to set a base rem value on the body:

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}

Without it, unstyled text will appear much smaller.

Check out snook's guide for more info: http://snook.ca/archives/html_and_css/font-size-with-rem

edited Jan 10 '16 at 01:22

answered Jan 10 '16 at 00:53

Sean

6,873
4
21
46

didn't change anything, and I don't see why it would – MattH Jan 10 '16 at 00:59
@Pegaseus When you say 'on mobile', are you viewing it on a mobile device, or are you resizing your desktop browser? And can you provide a link to this? – Sean Jan 10 '16 at 01:11
Viewing it on a mobile device through a local wamp server. I'm using Developer tools on android to inspect the elements on mobile. – MattH Jan 10 '16 at 01:13
Have you tried adding a [viewport meta tag](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)? – Sean Jan 10 '16 at 01:18
Welp I feel stupid now I swear I added it, but I didn't. Thanks for solving it! – MattH Jan 10 '16 at 01:20
Sometimes you need a second set of eyes @Pegaseus – Sean Jan 10 '16 at 01:23

Inconsistency paragraphs textsize

1 Answers1