How to create a font size that adjusts itself to fill a column?

1

Here is the code for my tribute page: http://codepen.io/colesam/pen/YZjbzK

<body>
	<div class="container-fluid">
		<div class="jumbotron-fluid card-shadow" style="background-color: white">
			<div class="row">
				<div class="col-xs-8 col-xs-offset-2">
					<h1 class="text-center" id="title">Christopher J. McCandless</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-8 col-xs-offset-2">
					<div class="thumbnail">
						<img src="http://www.jeffhead.com/images/ITW-07.jpg" class="img-responsive full-width" id="picture-main">
						<div class="caption text-center">
							<h3><em>Christopher McCandless standing in the Alaskan Wild</em></h3>
						</div>
					</div>
				</div>
			</div>
			<br>
			<br>
			<div id="content">
				<h2 class="text-center">Who is Alexander Supertramp?</h2>
				<div class="col-xs-8 col-xs-offset-2">
					<p>
						Christopher J. McCandless was an American hiker and itinerant traveler, who also went by the name "Alexander Supertramp". After graduating from college in 1990, McCandless traveled the United States, and eventually hitchhiked to Alaska in April 1992.There,
						he set out along an old mining road known as the Stampede Trail, with minimal supplies, hoping to live simply off the land. Almost four months later, McCandless' decomposing body, weighing only 30 kilograms (66 lb), was found by hunters in a converted
						bus used as a backcountry shelter along the Stampede Trail, on the eastern bank of the Sushana River. His cause of death was officially ruled to be starvation, although the exact cause remains the subject of some debate.
					</p>
				</div>
				<br>
				<br>
				<div class="row">
					<div class="col-xs-4 col-xs-offset-4">
						<a href="https://en.wikipedia.org/wiki/Christopher_McCandless"><button class="btn btn-primary btn-block card-shadow" id="learn-button"><span style="font-size: 250%">Learn More</span></button></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

body {
	margin-top: -20px;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 10px;
	background-color: #78AB46;
}

#learn-button {
	margin-bottom: 20%;
	margin-top: 20%;
}

.card-shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.full-width {
	width: 100%;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h1 {
	padding-top: 80px;
	padding-bottom: 30px;
	font-size: 100%;
}

h2 {
	padding: 2%;
}

h3 {
	font-size: 100%;
	font-family: "Times New Roman", Times, Serif;
}

I’d like the h1 tagged title to always align itself to the image below it. I put it in a bootstrap column that is the same width as the picture and set the font-size to 100%. I thought that maybe 100% would set it to fill the width of the column, but that is not the case.

What does the font size as a percentage mean? Also how can I align my title to always be the same width as the image? I’ve also been hitting issues with the Learn Button text goofing up when the screen is narrowed. I don’t think I have a firm grasp of font sizes and how to manipulate them to get what I want as the screen changes.

2

According to w3schools documentation font-size.

% Sets the font-size to a percent of the parent element’s font size

You can set font-size by px, em and rem units. Read this introduction article to [rem vs em] (Confused About REM and EM? | Jeremy Church) units. Rem and em units can both scale in size dependent on parent div or html element font-size.

I’m not sure how you would accomplish this task. Here is a stack overflow on Font scaling based on width of container. Hopefully, you find some ideas from the SO, stack overflow, post.

3

Hmm, I tried using font-size: vmax; on the h1 title and the button text on the bottom to adjust it to the size of the container, but that doesn’t seem to affect the size of the text as the screen gets larger or smaller.

Many places online say that I need to use JS to achieve this, but it feels like there has to be a simpler way to scale text to the size of the screen. If not I may just have to wait until I get to the Javascript portion of the lessons.

4

I was able to use the vw and vh to partially get what I want, unfortunately I can’t find any way to get it to scale the exact same way as the picture, but that’s not super necessary.

5

You can try changing the letter-spacing. Just remember to set it to a scalable unit and not px.

This SO article covers font scaling to canvas which could be applied to font scaling for div. This should’nt be to difficult if you feel comfortable with Javascript.

Maybe the letter-spacing will make it good enough for now. You can visit the JS part later.

1 Like