CODEWITHSUNDEEP
htmlcss
oneman
oneman

Reputation: 811

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>

Upvotes: 0

Views: 173

Answers (2)

Danield
Danield

Reputation: 125443

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;

Upvotes: 2

Canned Man
Canned Man

Reputation: 766

You haven’t set a base size for your font size (in body or in html). If you set your font-size to a relative size in percentile, it should resize properly. Remember that even though em is a relative size, it still needs to know what it’s relative to.

Upvotes: 0

Related Questions