<div class="wrapper">
	<div class="container">
		<div class="element">
			<p>Example 2</p>
			<svg width="400" height="250" viewBox="0 0 400 250">
				<rect x="0" y="0" width="400" height="250" fill="#eeeeee" />
				<text transform="translate(50, 50)" font-size="16" font-family="Arial">Ahh, I resize just in time...</text>
			</svg>
		</div>
	</div>
</div>
.wrapper {
	width: 100%;
	height: 100%;
	font-family: Arial;
}

.container {
	max-width: 1000px;
	width: 90%;
}

.element {
	width: 50%;
	background-color: #cccccc;
	padding: 20px;
}

p {
	text-align: center;
	font-size: 24px;
}

svg {width: 100%;}

@media only screen and (max-width: 910px) {
	p {font-size: 2.6373626374vw;}
	svg {
		width: 43.956043956vw;
		height: 27.472527473vw;
	}
}
// For a Medium post
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.