Why is the text so small on mobile devices?

HTML & CSS
1

Here is a web page I’m working on
responsive.HTML (9.0 KB)

Hwy some of the text gets miniature on mobile device ?

2

In .container you are setting the font-size to 1.5vh which means .015% of the viewport height. Therefore on a small screen or even on the desktop with the browser height reduced the text becomes miniscule.

I suggest if you want dynamic heights you use css clamp so that you can set a minimum and a maximum and a range to scale.

Basic the text size based on the height of the document is not a very good approach anyway and generally you would want it based on the width for a better scaling experience.

3

In .container you are setting the font-size to 1.5vh which means .015% of the viewport height. Therefore on a small screen or even on the desktop with the browser height reduced the text becomes miniscule.

I suggest if you want dynamic font-sizing you use css clamp so that you can set a minimum and a maximum font-size and a range to scale.

Basing the text size based on the height of the document is not a very good approach anyway and generally you would want it based on the width for a better scaling experience.

4

Most text on a page does not need to be dynamically sized. I would start with something like this and then build in dynamic sizing as you need it.

html {
font-size: 100%;
}
p {
font-size: inherit;
}
h1 {
font-size: 2rem;
}

The above is just an example. You can add things like clamp() to specific bits that you want.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.