CODEWITHSUNDEEP
htmlcssfont-size
NullPointerException
NullPointerException

Reputation: 37731

Font size extremely small on mobile devices

I have a <p> block in a huge <div> in the main body of my html with 80% in font-size, and also I have a footer <div> in the lower part of my body.

The text in the footer has also 80% font-size, and if I test it on my PC it is equal, but if I test it in a mobile device, the text of the footer is extremely small, impossible to be read.

How is this possible? Which is the explanation and how can this be avoided?

My main text:

<div id="mainTextContainer" class="text">
    <p>test text</p>
</div>

My footer:

<div id="cookiesBar">
    <div>
        Esta web utiliza 'cookies' para su navegación.
        Al utilizar nuestros servicios aceptas su uso.         
    </div>
</div>

My CSS:

#cookiesBar {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
    height: auto;
    background-color: rgba(136, 188, 182, 0.7);
    z-index: 99999;
    border-radius: 0px;
    text-decoration: none;
    line-height: 30px;
    font-size: 80%;
    font-family: verdana;
}

#mainTextContainer {
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 60px;
}

.text {
    font-size: 80%;
}

Upvotes: 28

Views: 15836

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372274

Have you added the viewport meta tag to your document?

If not, add this to your head section:

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

A mobile browser will naturally attempt to zoom out to display your entire web page like a desktop browser. The viewport meta tag scales your page to the device width.

More information:

Upvotes: 89

Sean
Sean

Reputation: 13

Depending on the version of IOS you're using it may actually be an issue, with that version of the browser.

Just declare the base font size:

body {
 ~mybase font size
}

Upvotes: 1

Related Questions