Issue with text inside of division with fixed width but auto height

[IcyPRO]

So this is my issue I can’t wrap my head around.

First, please look at these two pictures to understand my problem better:
https://imgur.com/a/uJVJO

Basically, when I put text inside of division and define ONLY it’s width, it will start doing strange things when trying to zoom in.
I cannot explain why is it doing what it’s doing:

1.) why does Android Browser change division width when it’s fixed, but only when height is not defined (auto)?
2.) why does Chrome Browser increase font size, again, only when width is fixed and height isn’t specified?

But when both width and height are specified, then both browsers work as intended.
Why is that?

Please help me figure this out..

[Beverleyh]

Unfortunately we can’t diagnose images. We need to see code. Please recreate the issue in a CodePen to help us firstly see the problem, and then comment on it.

[IcyPRO]

Sure thing.

I’m not sure if this is the right way to share in CodePen, but here. Hope it works:
https://codepen.io/IcyPRO/pen/qooemG

So when I don’t define DIV HEIGHT and open these HTML files in Android Web Browsers, they start to mess things up.

[IcyPRO]

So turns out, that in Android MIUI Browser if I disable JavaScript, it’ll stop changing division’s set width, when there’s text inside.
But since I haven’t learned anything about JavaScript yet, I have no idea how to prevent that.

Now when it comes to Chrome Browser, it doesn’t do that, but the text is much larger than on PC or Android Browser…
Even when is font set to 12px.

How in the world will I be able to make a site that will look the way I want on any device at this rate??

[Author]

Posts