My understanding was that using font-size: 4em; would result in a relative size, but I am facing an issue where the font size remains constant regardless of window size. This causes overlap and makes the text look unattractive. Specifically, the text in question is "Test Title."
When viewing the text at full screen (2560x1440), it looks satisfactory to me: https://i.sstatic.net/lFUOE.png
However, when the screen resolution is reduced to half, the appearance deteriorates: https://i.sstatic.net/h4750.png
On mobile devices, the situation is even worse.
h1, h2, h3, p {
color: #39382e;
}
.left h1 {
margin-top: 90px;
color: gray;
font-size: 4em;
text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}
.left h2 {
color: gray;
font-size: 1em;
margin-top: -50px;
font-weight: lighter;
}
div.left {
width: 20%;
display: inline-block;
overflow: auto;
}
#upperleft, #lowerleft {
min-height: 360px;
max-height: 361px;
max-width: 551px;
border: 1px solid white;
border-radius: 5px;
}<div class="left">
<div id="upperleft">
<h1>Web Design</h1>
<h2>Put your business online for the world to see</h2>
<a href="#" class="learnmore">
<div>Learn More</div>
</a>
</div>
<div id="lowerleft">
<h1>Contact us</h1>
<h2>Get a quote or ask us a question today</h2>
<a href="#" class="learnmore">
<div>Learn More</div>
</a>
</div>
</div>