oneman oneman - 26 days ago 10
HTML Question

Why does my font-size not change relative to the screen size?

I am using

font-size: 4em;
which I understood to be a relative size? But when I change the size of my window, my font size does not change. It stays the same and starts to overlap and look ugly. The text I am referring to is "Test Title"

Here is what it looks like full screen(2560x1440),I am happy with it
enter image description here

But this is what it looks like half screen
enter image description here

And it looks even worse on mobile.



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>




Answer

But when I change the size of my window, my font size does not change.

It is true that em units are relative, however, they are not relative to the viewport, but rather - relative to the calculated font size of the parent element (when set on the font-size property) - which of course doesn't change when resizing the viewport

So if you want the font size to change with the viewport, you have two options:

1) Use media queries to alter the base font-size depending on the viewport width/height (in which case you would probably use rem units on the elements which you want their font size to change respectively) or

2) Use viewport units eg: font-size: 2vw;

Comments