As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales.
For example:
p {
width: 10%;
height: 10%;
background-color: rgb(0,0,0);
top: 50%;
left: 50%;
position: fixed;
color: rgb(255,255,255);
font-size: 175%;
}<!DOCType html>
<html>
<head>
<title>:(</title>
</head>
<body>
<div><p>TEXT</p></div>
</body>
</html>This is just an illustration and not exactly how I have implemented it. Even though the div maintains its size when zooming in or out of the browser, the text does not stay within the box as expected.