CODEWITHSUNDEEP
htmlcss
Assen Antonov
Assen Antonov

Reputation: 15

Tex in div within div container appears small on small viewport

I'm struggling with something that I'm sure is very simple, but above my knowledge or google skills. I'm having multiple pages with text contained in div within div like so:

<!doctype html>
<html>
    <head>
        <title>Page title</title>
        <meta name="viewscreen" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div>
            <div>Banner</div>
            <div>
                <div>
                    <p>&emsp;Paragraph text</p>
                    <ul>
                        <li>
                            <p>li item 1</p>
                        </li>
                        <li>
                            <p>li item 2</p>
                        </li>
                        <li>
                            <p>li item 3</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

When scaling to a small viewport the text appears very tiny if shorter (my guess is that this happens when the text is shorter than div width). I figured out that I can use vw for text size, that appears to be a workaround, but I still can't understand what's the cause of this behavior. Can someone give me a hint how to overcome this problem and what is the potential cause for it?

Thanks in advance,

Assen

Upvotes: 0

Views: 37

Answers (2)

Saravana
Saravana

Reputation: 3496

Try this

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">

Upvotes: 0

Harshveer Singh
Harshveer Singh

Reputation: 4187

Add meta tag with name viewport, I don't think viewscreen is a valid meta tag name. That should fix the problem.

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

Upvotes: 2

Related Questions