Font size extremely small on mobile devices

Question

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%;
}

Answer 1

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:

• A tale of two viewports ~ QuirksMode.org
• Using the viewport meta tag to control layout on mobile browsers ~ MDN