I'm working on my personal website, just learning. I have a large, main block of text with my site name, and under it some links to my social media, etc. The problem is the large, main block of text scales perfectly, but the small text under it does not.
The code I currently use for placing it is here:
<!--
<div class="center">
<p style="position: absolute; top: 32%; left: 50%; transform:
translate(-50%, -50%); font-family: 'Qwigley'; font-style: normal; font-
size: 72px; color: white; text-shadow:0px 0px 5px white;">ndb.life</p>
<a style="position: absolute; top: 44%; left: 44.5%; transform:
translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font-
style: normal; color: white; text-shadow: 0px 0px 1px white; text-
decoration: none;" href="http://steamcommunity.com/id/xfh" rel="noopener
noreferrer" target="_blank">(main) steam</a>
<a style="position: absolute; top: 44%; left: 50%; transform:
translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font-
style: normal; color: white; text-shadow:0px 0px 1px white;">youtube</a>
<a style="position: absolute; top: 44%; left: 54%; transform:
translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font-
style: normal; color: white; text-shadow:0px 0px 1px white;">configs</a>
<a style="position: absolute; top: 44%; left: 57.5%; transform:
translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font-
style: normal; color: white; text-shadow:0px 0px 1px white;">email</a>
</div>
The class used on the div is in my style.css here:
#center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Try it out yourself, just mess with the window size and watch as the text goes inside each other and move weirdly. Any way to fix this?
Demo[
^]
What I have tried:
Changing the position of the div and the text from absolute to relative to fixed etc. nothing seems to work.